I like that! Here's a slightly changed version. I put IDs in the divs to help debug the flow of code, you don't need these though.
It helped doing these a while back, it's built from an xml file and is similar to what you have with the opening and closing menu items. http://www.adrianlynch.co.uk/autotrade/menu_f_1.swf http://www.adrianlynch.co.uk/autotrade/menu_f_2.swf http://www.adrianlynch.co.uk/autotrade/menu_f_3.swf http://www.adrianlynch.co.uk/autotrade/menu_f_4.swf One change might be to make the code do both, close all items on opening another and leave them open, with only a change in the script. This doesn't work in Firefox. Are you planning on making it work on more browsers? Would be nice to see the finished product :O) Let me know how it works out. Ade </html> <head> <script language="JavaScript1.2"> // Reference to all label divs var labels = new Array(); function buildAccordion() { allDivs = document.getElementById("accordion").getElementsByTagName("DIV"); for ( var i = 0; i < allDivs.length; i++ ) { var thisDiv = allDivs[i]; // Store label divs only and assign the onclick for each if ( thisDiv.className == "label" ) { labels[labels.length] = thisDiv; thisDiv.onclick = showHidePane; } } labels[0].parentNode.childNodes.item(1).style.display = "block"; } function closeAllPanes(node) { for ( var i = 0; i < labels.length; i++ ) { var thisDiv = labels[i].parentNode.childNodes.item(1); //alert(thisDiv.id); if ( thisDiv != node ) { //alert(thisDiv.id); thisDiv.style.display = "none"; } } } function showHidePane() { var pane = this.parentNode.childNodes.item(1); closeAllPanes(this); if ( pane.style.display == "block" ) pane.style.display = "none"; else pane.style.display = "block"; } </script> <style> #accordion{width:220px} div.panel {border:dashed silver 1px} div.label {border-bottom:dashed silver 1px;cursor:pointer} div.pane {display:none;cursor:default} </style> </head> <body onload="buildAccordion()"> <div id="accordion"> <div class="panel" id="pane_1"> <div class="label" id="label_1">panel 1</div> <div class="pane" id="pane_1">content 1<br /><br /><br /></div> </div> <div class="panel" id="pane_2"> <div class="label" id="label_2">panel 2</div> <div class="pane" id="pane_2">content 2<br /><br /><br /></div> </div> <div class="panel" id="pane_3"> <div class="label" id="label_3">panel 3</div> <div class="pane" id="pane_3">content 3<br /><br /><br /></div> </div> <div class="panel" id="pane_4"> <div class="label" id="label_4">panel 4</div> <div class="pane" id="pane_4">content 4<br /><br /><br /></div> </div> <div class="panel" id="pane_5"> <div class="label" id="label_5">panel 5</div> <div class="pane" id="pane_5">content 5<br /><br /><br /></div> </div> </div> </body> </html> -----Original Message----- From: Paul [mailto:[EMAIL PROTECTED] Sent: 23 February 2005 16:02 To: CF-Talk Subject: RE: help with JavaScript accordion Doh! My son woke up and distracted me from finishing the message. Here's what I meant to include. You can view the source to see where I'm going... http://www.malan.org/accordion.html -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.300 / Virus Database: 266.4.0 - Release Date: 22/02/2005 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Logware (www.logware.us): a new and convenient web-based time tracking application. Start tracking and documenting hours spent on a project or with a client with Logware today. Try it for free with a 15 day trial account. http://www.houseoffusion.com/banners/view.cfm?bannerid=67 Message: http://www.houseoffusion.com/lists.cfm/link=i:4:196173 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4 Donations & Support: http://www.houseoffusion.com/tiny.cfm/54
