Results 1 to 2 of 2

Thread: Accordion Content script - lock groups?

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

    Default Accordion Content script - lock groups?

    FF1+ IE6+ Opera 9+ Accordion Content script (v1.5.1)

    http://www.dynamicdrive.com/dynamici...chnology=0,1,2

    Anybody know a way to lock a header from expanding until the user completes an action in a previous group. The sequence would be something like:

    Header A open, Header B locked
    User clicks something in Header A, now B is unlocked to expand/contract

    Thank you

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Sure, one way to do this is to first use the oninit() event handler to explicitly collapse the 3rd header and remove the expand/contract functionality from it when the page loads:

    Code:
    <script type="text/javascript">
    
    //Initialize first demo:
    ddaccordion.init({
    	headerclass: "mypets", //Shared CSS class name of headers group
    	contentclass: "thepet", //Shared CSS class name of contents group
    	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
    	collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
    	defaultexpanded: [0], //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: ["", "openpet"], //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: "fast", "normal", or "slow"
    	oninit:function(expandedindices){ //custom code to run when headers have initalized
    		ddaccordion.collapseone('mypets', 2) //explicitly collapse 3rd header to start
    		jQuery('.mypets').eq(2).unbind('evt_accordion') //lock up 3rd header from expanding/contracting until some action
    	}
    })
    
    </script>
    At this point, you'll need to make a small addition to the .js file (in red):

    Code:
    		$('.'+config["headerclass"]).bind("evt_accordion", evt_accordion_action=function(){ //assign custom event handler that expands/ contacts a header
    Then, to unlock header 3, you can do so with a function such as:

    Code:
    <script type="text/javascript">
    
    function unlockheader(headerclass, index){
    	var $header=jQuery('.'+headerclass).eq(index)
    	$header.bind('evt_accordion', evt_accordion_action)
    }
    
    </script>
    For example:

    Code:
    <a href="javascript:unlockheader('mypets', 2)">Click to unlock header 3</a>

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
  •