PDA

View Full Version : Accordion Content Script



anyalynn
07-30-2008, 01:34 AM
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
07-30-2008, 01:47 AM
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
07-30-2008, 02:06 AM
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
07-30-2008, 04:43 PM
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
07-30-2008, 08:46 PM
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
07-30-2008, 09:17 PM
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
07-30-2008, 09:53 PM
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
07-30-2008, 10:02 PM
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
07-30-2008, 10:14 PM
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
07-30-2008, 10:27 PM
I don't see any changes made on this page (http://www.schoolsinaction.org/).

anyalynn
07-30-2008, 10:36 PM
Sorry, an update glitch. Now it is up there and the expanded menu tries to close and then reopens. Maybe this is related to the persiststate variable. Home is a special case and I need all the menus to close for home.

ddadmin
07-31-2008, 01:52 AM
Ok, looks like a timing issue. Collapse_all() collapses every header in a group using the script's accordion animation. The problem with that is that by the time the headers are actually closed, the user is already taken to the target page set by the "Home" link. With persistence on, the headers are remembered as expanded, hence appear to snap back on the target page.

A solution it seems would be to instantly hide the headers (instead of via an animation) when the "Home" link is clicked on. Instead of what I had posted earlier, try the following changes to the "Home" link:


<h3><a href="index.php" onClick="jQuery('.categoryitems').hide()">Home</a></h3>

Untested, but should work.

Fixed error

anyalynn
07-31-2008, 03:57 AM
I made the change you suggested on the server and it still does something weird, and ultimately does not stay collapsed

ddadmin
07-31-2008, 05:04 AM
Ops, I forgot in this case, the parameter passed into jQuery() shoulld be "categoryitems" instead of "expandable". I've fixed the typo above. Please try again.

anyalynn
07-31-2008, 01:53 PM
It works! There is a little delay but I can live with that. Thanks again for the help!