Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    348
    Thanks
    54
    Thanked 0 Times in 0 Posts

    jQuery Bullet List Accordion Menu State Change

    For the main menu of a site I'm building, I'm using a "Bullet List Accordion Menu" developed by Dynamic Drive (Bullet List Accordion Menu Link).

    I've been able to alter the code thus far, but need some GOOD help for these last two idea implementations.

    Here's the coding as I've altered thus far:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    
    <script type="text/javascript" src="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({
    	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
    	}
    })
    
    jQuery(function($){ //on document.ready
    	var $targets=$('h3.menuheader')
    	$targets.mouseenter(function(){
    		$(this).addClass('overheader')
    	})
    	$targets.mouseleave(function(){
    		$(this).removeClass('overheader')
    	})
    })
    
    </script>
    
    <style type="text/css">
    
    .arrowlistmenu{
    width: 180px; /*width of accordion menu*/
    }
    
    .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
    font: bold 14px Arial;
    color: white;
    background: black url(titlebar.png) repeat-x center left;
    margin: 0px; /*bottom spacing between header and rest of content*/
    text-transform: uppercase;
    padding: 4px 0 4px 10px; /*header text is indented 10px*/
    cursor: hand;
    cursor: pointer;
    }
    
    .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
    background-image: url(titlebaractive.png);
    }
    
    .arrowlistmenu .overheader{
    background-image: url(titlebaractive.png);
    }
    
    .arrowlistmenu ul{ /*CSS for UL of each sub menu*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
    }
    
    .arrowlistmenu ul li{
    padding-bottom: 2px; /*bottom spacing between menu items*/
    }
    
    .arrowlistmenu ul li a{
    color: #c0c0c0;
    background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
    display: block;
    padding: 2px 0;
    padding-left: 19px; /*link text is indented 19px*/
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid #dadada;
    font-size: 90%;
    }
    
    .arrowlistmenu ul li a:visited{
    color: #FF7400;
    }
    
    .arrowlistmenu ul li a:hover{ /*hover state CSS*/
    color: white;
    background-color: #000000;
    }
    
    </style>
    
    </head>
    
    <body>
    
    <div class="arrowlistmenu">
    
    <h3 class="menuheader" style="cursor: default">Specials</h3>
    
    <h3 class="menuheader expandable">About</h3>
    <ul class="categoryitems">
    <li><a href="">The Studio</a></li>
    <li><a href="">The Staff</a></li>
    </ul>
    
    <h3 class="menuheader" style="cursor: default">Gallery</h3>
    
    <h3 class="menuheader expandable">Senior Challenge</h3>
    <ul class="categoryitems">
    <li><a href="">About the Challenge</a></li>
    <li><a href="">Vote Now</a></li>
    </ul>
    
    <h3 class="menuheader expandable">Prices</h3>
    <ul class="categoryitems">
    <li><a href="">Senior</a></li>
    <li><a href="">Children</a></li>
    <li><a href="">Family | Pets</a></li>
    <li><a href="">Maternity | Newborn</a></li>
    <li><a href="">Promo | Business</a></li>
    <li><a href="">Special | Wedding</a></li>
    <li><a href="">Products</a></li>
    </ul>
    
    <h3 class="menuheader" style="cursor: default">FAQ</h3>
    
    <h3 class="menuheader" style="cursor: default">Client Log-in</h3>
    
    <h3 class="menuheader" style="cursor: default">Contact</h3>
    
    </div>
    </body>
    </html>
    Highlighted in red are pieces of coding I've added in order to change the background of a header on a mouse hover.

    But I can't for the life of me figure out how to make a click change event for the persist state of non-expandable headers, like how the other is specific to the expandable ones, but to go away when another header is clicked. Can anyone help?

  • #2
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    348
    Thanks
    54
    Thanked 0 Times in 0 Posts
    33 views since 10am...and no one?

  • #3
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Quote Originally Posted by Psionicsin View Post
    how to make a click change event for the persist state of non-expandable headers, like how the other is specific to the expandable ones, but to go away when another header is clicked.
    Sorry, I don't understand that. Can you clarify in a bit more detail?

  • #4
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    348
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Spudhead View Post
    Sorry, I don't understand that. Can you clarify in a bit more detail?
    Yes. There's something in the markup that's telling all of the expandable headers to highlight and hold with the 2nd background image when they're expanded, and go away when another expandable header is clicked.

    I , however, want the non-expandable headers to also be able to highlight and hold that 2nd image, and go away when another header (expandable or not) is clicked.

    Someone did solve this for me, so now all I need is for the expandable headers to retract when ANY header besides itself is clicked.


  •  

    Posting Permissions

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