Results 1 to 2 of 2

Thread: Help with "Accordion Content script (v1.5.1)"

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

    Default Help with "Accordion Content script (v1.5.1)"

    1) Script Title:
    Accordion Content script (v1.5.1)
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...daccordion.htm
    3) Describe problem:
    I gave each main-element an id, like this:
    <h3 class="menu_main" id="menu_news">&nbsp;</h3>
    so that I can give it a background-image, that is different on each element.
    But now I want to change this background-image (means the id to something like menu_news_open) when it is expanded... But I have no real clue how to do this, and what I need to change in the js-file...
    Anyone here who can help me?

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

    Default

    Well, the script does let you swap between two classes (not ids) for the headers, depending on whether they are expanded or contracted:

    Code:
    //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: ["closeclass", "openclass"], //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
    		//do nothing
    	},
    	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    		//do nothing
    	}
    })
    Now, since you're giving each header a unique ID, within your CSS, you should also be able to specify a different background image pair for each header, by associating each ID with the two CSS classes specified above. Something like:

    Code:
    <style type="text/css">
    
    #menu_news.openclass{
    background: url("a1.gif")
    }
    
    #menu_news.closedclass{
    background: url("a2.gif")
    }
    
    #menu_sports.openclass{
    background: url("b1.gif")
    }
    
    #menu_sports.closedclass{
    background: url("b2.gif")
    }
    
    </style>
    Edit: Corrected an error in the CSS above
    Last edited by ddadmin; 09-25-2008 at 07:32 PM.
    DD Admin

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
  •