Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Accordion Content Script

  1. #1
    Join Date
    Jul 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Accordion Content Script

    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>

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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.
    Jeremy | jfein.net

  3. #3
    Join Date
    Jul 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Jul 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Please help with Accordion Content Script

    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.
    Last edited by ddadmin; 07-30-2008 at 09:06 PM.

  5. #5
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Try this:
    HTML Code:
    <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>
    Jeremy | jfein.net

  6. #6
    Join Date
    Aug 2004
    Posts
    9,890
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    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:

    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:

    Code:
    <h3><a href="index.php" onClick="ddaccordion.collapseall('expandable')">Home</a></h3>
    Either techniques above should work.

  7. #7
    Join Date
    Jul 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy

    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.

  8. #8
    Join Date
    Aug 2004
    Posts
    9,890
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

    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?

  9. #9
    Join Date
    Jul 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Aug 2004
    Posts
    9,890
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •