SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Location
    South Africa
    Posts
    24
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    3rd level header - accordion menu

    Good morning everyone,

    I really need some help with this - I've tried everything but cannot get it to work properly. My client now wants a third header at the top.

    Right now it is:

    Party Wigs (expand)
    Themes (expand)

    I need to add another header at the top:

    Accessories (expand)
    Party Wigs (expand)
    Themes (expand)

    Can someone please help? This is my code:

    HTML Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.iparty.co.za/storescripts/ddaccordion.js">
    /***********************************************
    * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    </script>
    
    <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: [], //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: false, //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>
    <a href="index.php">Home</a><br />
    <a href="about.php">About Us</a><br />
    <a href="locate.php">Locate Us</a><br />
    <br />
    <h3>Products:</h3>
    <div class="arrowlistmenu">
    <h3 class="menuheader expandable">Party Wigs</h3>
    <ul class="categoryitems">
    <li><a href="http://www.iparty.co.za" class="subexpandable">Themed</a>
    <ul class="subcategoryitems" style="margin-left: 10px">
    <li><a href="list.php?category=wigs_themed&subcategory=african">African</a></li>
    <li><a href="list.php?category=wigs_themed&subcategory=egyptian">Egyptian</a></li>
    <li><a href="list.php?category=wigs_themed&subcategory=eighties">Eighties</a></li>
    <li><a href="list.php?category=wigs_themed&subcategory=elderly">Elderly</a></li>
    <li><a href="list.php?category=wigs_themed&subcategory=famous">Famous</a></li>
    <li><a href="list.php?category=wigs_themed&subcategory=halloween">Halloween</a></li>
    <li><a href="list.php?category=wigs_themed&subcategory=indian">Indian</a></li>
    <li><a href="list.php?category=wigs_themed&subcategory=japanese">Japanese</a></li>
    <li><a href="list.php?category=wigs_themed&subcategory=judge">Judge</a></li>
    <li><a href="list.php?category=wigs_themed&subcategory=pirate">Pirate</a></li>
    <li><a href="list.php?category=wigs_themed&subcategory=pixie">Pixie</a></li>
    <li><a href="list.php?category=wigs_themed&subcategory=royalty">Royalty</a></li>
    <li><a href="list.php?category=wigs_themed&subcategory=sixties">Sixties</a></li>
    </ul>
    </li>
    <li><a href="list.php?category=wigs_afro&subcategory=afro">Afro</a></li>
    <li><a href="list.php?category=wigs_auburn&subcategory=auburn">Auburn</a></li>
    <li><a href="list.php?category=wigs_blonde&subcategory=blonde">Blonde</a></li>
    <li><a href="list.php?category=wigs_black&subcategory=black">Black</a></li>
    <li><a href="list.php?category=wigs_brown&subcategory=brown">Brown</a></li>
    <li><a href="list.php?category=wigs_clown&subcategory=clown">Clown</a></li>
    <li><a href="list.php?category=wigs_coloured&subcategory=coloured">Coloured</a></li>
    <li><a href="list.php?category=wigs_punk&subcategory=punk">Punk</a></li>
    <li><a href="list.php?category=wigs_tinsel&subcategory=tinsel">Tinsel</a></li>
    <li><a href="list.php?category=wigs_white&subcategory=white">White</a></li>
    </ul>
    
    </div>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    This isn't too hard.
    Just declare a third level of navigation in the JavaScript and adapt your HTML code accordingly.

    Here's a working example:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>3 level accordion</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://www.iparty.co.za/storescripts/ddaccordion.js">
        /***********************************************
        * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
        * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
        * This notice must stay intact for legal use
        ***********************************************/
        </script>
      </head>
      
      <body>
        <div class="arrowlistmenu">
          <h3 class="menuheader expandable">Accessories</h3>
          <ul class="categoryitems">
            <li>
              <a href="http://www.iparty.co.za" class="subexpandable">Party Wigs</a>
              <ul class="subcategoryitems" style="margin-left: 10px">
                <li>
                  <a href="list.php?category=accessories&subcategory=wigs" class="subsubexpandable">Themed</a>
                  <ul class="subsubcategoryitems" style="margin-left: 20px">
                    <li><a href="list.php?category=accessories&subcategory=wigs&sub-sub-category=afro">Afro</a></li>
                    <li><a href="list.php?category=accessories&subcategory=wigs&sub-sub-category=eighties">Eighties</a></li>
                  </ul>
                </li>
                <li><a href="list.php?category=accessories&subcategory=wigs">Non-themed</a></li>
              </ul>
            </li>
            <li><a href="list.php?category=accessories&subcategory=moustaches">Comedy moustaches</a></li>
            <li><a href="list.php?category=accessories&subcategory=vodka">Vodka</a></li>
          </ul>
        </div>
      
            <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: [], //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: false, //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
            }
          })
        
          ddaccordion.init({ //3rd level headers initialization
            headerclass: "subsubexpandable", //Shared CSS class name of sub headers group that are expandable
            contentclass: "subsubcategoryitems", //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: false, //persist state of opened contents within browser session?
            toggleclass: ["opensubsubheader", "closedsubsubheader"], //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>
      </body>
    </html>
    I hope this helps.

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    Location
    South Africa
    Posts
    24
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you so very much for your help - it now works perfectly! I had a basic idea of what had to be done, but just couldn't figure out how to.

    Thanks so much! :-)

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,890
    Mentioned
    211 Post(s)
    Tagged
    12 Thread(s)
    You're welcome
    Thanks for reporting back.


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
  •