Accordion Content Script

[anyalynn]

1) Script Title:
Accordion Content Script

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

3) Describe problem:
I am using the Accordion Content Script for collapsible menus. It all works fine except now I want to add a new menu item (home) that collapses all the menus and goes to the home page. I cannot get the collapseall function to work (it does nothing) Here is sample code where I just try to collapse the menus with the link Collapse all headers. Am I doing something obviously wrong?


<div class="arrowlistmenu">
<h3 class="menuheader expandable">Donate</h3>
<ul class="categoryitems">
<li><a href="index.php" >Make a donation</a></li>
</ul>
<h3 class="menuheader expandable">About</h3>
<ul class="categoryitems">
<li><a href="whoweare.php">Who We Are</a></li>
<li><a href="schools.php">Schools</a></li>
<li><a href="board.php">Board</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div>
<a href="#" onClick="ddaccordion.collapseall('menuheader expandable'); return false">Collapse all headers</a>

[Nile]

The problem is that you've got too many classes with the name menuhead expandable. Please take a look on how to use this script.

[anyalynn]

I don't understand what you mean. I copied the code for the expandable headers from the example and they work fine. I did not include the .css or the .js files with the example I gave.

[anyalynn]

Here is the url of the website where I use the accordion content script for the menus: www.schoolsinaction.org. Everything works fine, except I would really like to have no menus expanded when the user clicks on the Home menu item and goes to the home page. You can see the problem by clicking on another menu item (such as About). That menu expands. Now click on the Home menu item. You go to the Home page, but the About menu stays expanded and highlighted. I have tried using the collapseall function, but I have not been able to get it to work.

I can post all of the code in here if that makes it easier, but I don't think there is a big mistake in my code because I copied it from the Dynamic Drive website and then just modified the .css to make the colors I wanted.

Thanks very much in advance.

[Nile]

Try this:

<a href="#" onClick="ddaccordion.collapseall('menuheader expandable'); return false">Collapse all headers</a>
<div class="arrowlistmenu">
<h3 class="menuheader expandable">Donate</h3>
<ul class="categoryitems">
<li><a href="index.php" >Make a donation</a></li>
</ul>
<h3 class="menuheader expandable">About</h3>
<ul class="categoryitems">
<li><a href="whoweare.php">Who We Are</a></li>
<li><a href="schools.php">Schools</a></li>
<li><a href="board.php">Board</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div>

[ddadmin]

Everything works fine, except I would really like to have no menus expanded when the user clicks on the Home menu item and goes to the home page.

The problem occurs since you have persistence enabled on the top level headers, yet the "Home" menu item isn't part of this group. That means clicking on the "Home" item is the same as clicking on any arbitrary link on the page- it doesn't cause the state of the top level headers to change.

The quickest way to "fix" this is to disable persistence on the top level headers in your config code:

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
	collapseprev: false, //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
	animatedefault: false, //Should contents open by default be animated into view?
	persiststate: true, //persist state of opened contents within browser session?

If you need the persistence feature, what you can do instead is add inside the "Home" menu item code to collapse all headers before whisking the user away to the target page:

<h3><a href="index.php" onClick="ddaccordion.collapseall('expandable')">Home</a></h3>

Either techniques above should work.

[anyalynn]

Thank you so much for your response.

Adding the <h3><a href="index.php" onClick="ddaccordion.collapseall('expandable')">Home</a></h3> does not work. I think it should be ('menuheader expandable') instead of ('expandable') because that is the name of my class, but it doesn't matter, neither work. I've tried this with sample test files as well and I can't get the collapseall function to work. Does it really work? Can you point me to a site where this is working and maybe I can figure out what I am doing wrong. Thanks again.

[ddadmin]

The parameter passed should just be "expandable", since that's the class name that identifies the headers' group. Can you make the change I suggested above to your page online, so I can test the problem?

[anyalynn]

O.K. I changed it and posted it on the server. An expanded menu does not seem to collapse before going to the home page. Thanks again.

[ddadmin]

I don't see any changes made on this page.