Apple style Accordion Menu

[samimh88]

1) Script Title:
Apple style Accordion Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...silverheader=0
3) Describe problem:

I have 0 knowledge in JavaScript. The article is awesome and I found it very useful. I was trying to place an Accordion inside an accordion to build something similar to tree view (Family Tree). However, I faced some problems with opening and closing tabs.

Example :

 <div class="applemenu" id="div1">
        <div class="silverheader" id="div2"><a href="http://www.dynamicdrive.com">Dynamic Drive</a></div>
	    <div class="submenu" id="div3">
            <div>
                <div class="applemenu" id="dev4" style="width:160px;">
                    <div class="silverheader" id="div5"><a href="http://www.dynamicdrive.com">Dynamic Drive1</a></div>
	                    <div class="submenu" id="div6">
                            Text1<br />
                        </div>
                    <div class="silverheader" id="div7"><a href="http://www.dynamicdrive.com">Dynamic Drive2</a></div>
	                    <div class="submenu" id="div14">
                            Text2<br />
                        </div>
                    <div class="silverheader" id="div8"><a href="http://www.dynamicdrive.com">Dynamic Drive3</a></div>
	                    <div class="submenu" id="div9">
                            Text3<br />
                        </div>
                </div>
            </div>
        </div>
        
        <div class="silverheader" id="div10"><a href="http://www.dynamicdrive.com/style/" >CSS Examples</a></div>
	        <div class="submenu" id="div11">
	        Some random content here<br />
	        </div>
        <div class="silverheader" id="div12"><a href="http://www.cssdrive.com">CSS Drive</a></div>
	        <div class="submenu" id="div13">
	        Some random content here<br />
	        <img src="http://i27.tinypic.com/sy7295.gif" />
	        </div>
    </div>

When I place the mouse over Dynamic Drive1, Dynamic Drive2, or Dynamic Drive3 it opens the tab and closes the main one immediately (Dynamic Drive.)


Also,
I tried to place two accordions at the same page. However, when I place the mouse over one tab it closes any open tab on the second one.

I wanted something when I go over the tab it closes the previous ones at the same menu.

Could you please help me with this problem?

Thanx,
Sami

[ddadmin]

Accordion Menu does supported nested levels, although perhaps not intuitively. Check out Nested Bullet List Menu (2nd example on that page). The key is creating a nested accordion menu is to treat each level of category headers as a new instance of Accordion Content script, so the 2nd nested level in this case ("CSS Drive") would be a new instance. Taken from code on that page:

<script type="text/javascript">


ddaccordion.init({ //top level headers initialization
	headerclass: "expandable", //Shared CSS class name of headers group that are expandable
	contentclass: "categoryitems", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	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
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	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: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})

ddaccordion.init({ //2nd level headers initialization
	headerclass: "subexpandable", //Shared CSS class name of sub headers group that are expandable
	contentclass: "subcategoryitems", //Shared CSS class name of sub contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
	mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
	defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
	onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?
	toggleclass: ["opensubheader", "closedsubheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
	animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
		//do nothing
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
})


</script>

<div class="arrowlistmenu">

<h3 class="menuheader expandable">CSS Library</h3>
<ul class="categoryitems">
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>

<h3 class="menuheader expandable">CSS Drive</h3>
<ul class="categoryitems">
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/" class="subexpandable">Menu Gallery</a>
	<ul class="subcategoryitems" style="margin-left: 15px">
	<li><a href="http://www.cssdrive.com/index.php/main/category/C34/">Blue Color</a></li>
	<li><a href="http://www.cssdrive.com/index.php/main/category/C36/">Green Color</a></li>
	<li><a href="http://www.cssdrive.com/index.php/main/category/C37/">Orange Color</a></li>
	<li><a href="http://www.cssdrive.com/index.php/main/category/C33/">Red Color</a></li>
	<li><a href="http://www.cssdrive.com/index.php/main/category/C38/">Brown Color</a></li>
	</ul>
</li>
<li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
<li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
</ul>

<h3 class="menuheader expandable">JavaScript Kit</h3>
<ul class="categoryitems">
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>
</ul>

<h3 class="menuheader" style="cursor: default">FeedBack</h3>
<div>
Regular contents here. Header does not expand or contact.
</div>

</div>