PDA

View Full Version : Accordion Menu script



Flea
03-02-2008, 03:02 AM
1) Script Title: Accordion Menu script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm

3) Describe problem: http://screencast.com/t/0KSgDOrTfKb

The first expandable UL always stays open, on page refresh's, I'd like it to stay closed upon openning new pages, How would I do this?



<script type="text/javascript">


ddaccordion.init({
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal" //speed of animation: "fast", "normal", or "slow"
})


</script>




<!--Catagory Icons / Links -->
<div class="arrowlistmenu" width="150">

<h3 align="center" class="menuheader"><div style="padding-top:11px;" class="menu_font"><a href="index.php?_a=viewCat&catId=1" class="menu_font">Premature</a></div></h3>


<h3 align="center" class="menuheader"><div style="padding-top:11px;" class="menu_font"><a href="index.php?_a=viewCat&catId=2" class="menu_font">Layette</a></div></h3>



<h3 align="center" class="menuheader expandable"><div style="padding-top:11px;">Newborn</div></h3>
<ul class="categoryitems">
<li><a href="index.php?_a=viewCat&catId=18">3 Months</a></li>
<li><a href="index.php?_a=viewCat&catId=19">6 Months</a></li>
<li><a href="index.php?_a=viewCat&catId=20">9 Months</a></li>

</ul>

<h3 align="center" class="menuheader expandable"><div style="padding-top:11px;">Infant</div></h3>
<ul class="categoryitems">
<li><a href="index.php?_a=viewCat&catId=21">12 Months</a></li>
<li><a href="index.php?_a=viewCat&catId=22">18 Months</a></li>
<li><a href="index.php?_a=viewCat&catId=23">24 Months</a></li>

</ul>

<h3 align="center" class="menuheader expandable"><div style="padding-top:11px;">Toddlers</div></h3>
<ul class="categoryitems">
<li><a href="index.php?_a=viewCat&catId=24">2T</a></li>
<li><a href="index.php?_a=viewCat&catId=25">3T</a></li>
<li><a href="index.php?_a=viewCat&catId=26">4T</a></li>

</ul>


<h3 align="center" class="menuheader expandable"><div style="padding-top:11px;">Kids</div></h3>
<ul class="categoryitems">
<li><a href="index.php?_a=viewCat&catId=27">Size 1</a></li>
<li><a href="index.php?_a=viewCat&catId=28">Size 2</a></li>
<li><a href="index.php?_a=viewCat&catId=29">Size 3</a></li>
<li><a href="index.php?_a=viewCat&catId=30">Size 4</a></li>
</ul>

<h3 align="center" class="menuheader"><div style="padding-top:11px;" class="menu_font"><a href="index.php?_a=viewCat&catId=7" class="menu_font">Accessories</a></div></h3>

<h3 align="center" class="menuheader"><div style="padding-top:11px;" class="menu_font"><a href="index.php?_a=viewCat&catId=8" class="menu_font">Bedding</a></div></h3>

<h3 align="center" class="menuheader"><div style="padding-top:11px;" class="menu_font"><a href="index.php?_a=viewCat&catId=9" class="menu_font">Bath</a></div></h3>


<h3 align="center" class="menuheader"><div style="padding-top:11px;" class="menu_font"><a href="index.php?_a=viewCat&catId=10" class="menu_font">Toys</a></div></h3>

<h3 align="center" class="menuheader"><div style="padding-top:11px;" class="menu_font"><a href="index.php?_a=viewCat&catId=11" class="menu_font">Car Seats</a></div></h3>


<h3 align="center" class="menuheader"><div style="padding-top:11px;" class="menu_font"><a href="index.php?_a=viewCat&catId=12" class="menu_font">Strollers</a></div></h3>




</div>

</div>
<!--Catagory Icons / Links ENDS-->

Flea
03-02-2008, 05:35 PM
Disregard, Found my issue.


In the head:


<script type="text/javascript">


ddaccordion.init({
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal" //speed of animation: "fast", "normal", or "slow"
})


</script>


I took teh 0 out from:



defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content



Seems to have cured it

Cheers.