Accordion Script Problems

[prisonsong]

1) Script Title: Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-bullet.htm

3) Describe problem:

My real issue isn't so much with the script rather than a question of its limitation. As the script is, the menus are set up as headers, and do not display content unless some form of printable text is entered into the header tags. I fixed this problem easily enough by converting the headers into DIVs, because I wanted to use images (while maintaining the CSS that the only images used are backgrounds).

So my problem is this: since the script is made to work assuming all headers require the same styles, how would you make it so that each individual header gets it own toggled class? To put it simply, I have two images for one button (a simple mouseover) but I want this to happen for each different header.

I would like to make two separate classes for each button saying that one class is how it should be collapsed, and the other is how it should be expanded, similar to how in the example .openheader compliments .menuheader.

The issue is that if I'm using different images for each button (which with my layout it is a must), I'm forced to make separate classes for each state of every button as well. Though I'm not fluent enough in javascript to know how to tell it associate one class with another. I know it has something to do with the toggleclass function, though this script only comes pre-written with that one instance of the toggleclass (menuheader and the corresponding openheader).

How do I make multiple classes toggle over to other classes?

Thanks


EDIT: If I didn't explain this very well, I suppose that the accordion script is irrelevant. Toggleclass is used once in the script given, but I need a toggleclass function for each and every button since they all with have different classes. If there is a simple way to do that, then I'm all for it. I really just needed a way to incorporate "click-activated" rollovers that didn't interfere with the consistency of the Accordion script.

(Oh, and sorry for the wall of text.)

[ddadmin]

You should be able to do this by taking advantage of the two event handlers of the script, specifically, the onopenclose() event.

Assuming your headers consist of a DIV with a background image::

<div class="menuheader">Header 1</div>

You would use the onopenclose() event to detect when the header is clicked on, whether it's expanded or not, and react accordingly. For example:

onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
 if (state=="block"){ //if header is expanded (as a result of either the user clicking on it or when the page loads)
  header.style.background=expandedbackgrounds[i]
 else{ //if it's contracted
  header.style.background=contractedbackgrounds[i]
 }
 }

Since you mentioned each header needs a different background image pair, each image pair is stored inside separate JS arrays, for example:

var expandedbackgrounds=[]
expandedbackgrounds[0]="url(expanded.gif)"
expandedbackgrounds[1]="url(expanded2.gif)"
expandedbackgrounds[2]="url(expanded3.gif)"

var contractedbackgrounds=[]
contractedbackgrounds[0]="url(contracted.gif)"
contractedbackgrounds[1]="url(contracted2.gif)"
contractedbackgrounds[2]="url(contracted3.gif)"

That's the basic theory.

[prisonsong]

Thanks for the well-laid out response and how quick you were able to help out.

Makes sense when you explain it, but my limited knowledge of javascript is hurting me here.

First off, where should I insert either of these codes? As for the arrays, there is the script actually in the HTML and the script that links off (accordion.js or something). Which one would be best to house those added arrays you gave me? Or does it matter?

Furthermore, I'm having a few problems interpreting exactly how I'm supposed use these in relation to my navigation system. You posted code though it is hard to read for someone who is unfamiliar with javascript, and it only adds complication that I can't tell which part of that is example filler text and which part is actually necessary code.

To answer both of these questions easily, I would ask that you repost the code where the header's contracted image is info.png and the image executed when the header is collapsed is info_active.png.

I don't mean to make this bothersome, but I think with these titles inserted it would be much more easy to see exactly where I need to be putting what when I attempt to go off and do this on my own.

Thanks again!

[ddadmin]

Sure. Here is a sample configuration code using the two images you mentioned above:

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" 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: ["", "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: "normal", //speed of animation: "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
		if (state=="block"){
  			header.style.background="url(info_active.png)"
		}
 		else{ //if it's contracted
  			header.style.background="url(info.png)"
		}
	}
})

Did you read the documentation on the onopenclose() event handler?

[prisonsong]

That's perfect, exactly what I needed. Thank you!

I did indeed read the documentation though the articles I read related more to the text dropdowns provided in the examples of accordion scripts not relating to navigation. I suppose it might not have mattered too much but my biggest deal is being able to adapt the code from how you guys give it to how I need it. This is largely because my web design knowledge is limited to HTML, CSS, and php when I have needed it. Javascript is totally new for me, so I think its great there are resources such as this.

Again, thanks for the help and I only hope this works the first time around.

EDIT: And before I go thinking my problems are all gone, is it OK to assume that this code is repeatable as many times as I need it? I only gave you two images in my example but in reality there are multiple buttons, all with their own image pair for the rollover effect (although this has already been mentioned).

[ddadmin]

EDIT: And before I go thinking my problems are all gone, is it OK to assume that this code is repeatable as many times as I need it? I only gave you two images in my example but in reality there are multiple buttons, all with their own image pair for the rollover effect (although this has already been mentioned).

It depends what you mean by repeatable, but by specifying the image pairs as array (ie: expandedbackgrounds[] above), each header can have its own unique before/after background image, yes.

[prisonsong]

That seems simple enough, though in the second example you never specified where the script for the arrays are put. There are multiple places and files where I am able to insert this code, but I don't want to break anything.

[ddadmin]

That's because in the second example, you had asked for an explicit example using the two .png images. Anyhow, instead of:

	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		if (state=="block"){
  			header.style.background="url(info_active.png)"
		}
 		else{ //if it's contracted
  			header.style.background="url(info.png)"
		}
	}

To use the array instead, it would be:

	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		if (state=="block"){
  			header.style.background=expandedbackgrounds[i]
		}
 		else{ //if it's contracted
  			header.style.background=contractedbackgrounds[i]
		}
	}

[prisonsong]

I apologize for the confusion. Though unfortunately I think you misunderstood my question. I know how to use the arrays once they're set.

My question is where does this code go:

var expandedbackgrounds=[]
expandedbackgrounds[0]="url (expanded.gif)"
expandedbackgrounds[1]="url (expanded2.gif)"
expandedbackgrounds[2]="url (expanded3.gif)"

var contractedbackgrounds=[]
contractedbackgrounds[0]="url (contracted.gif)"
contractedbackgrounds[1]="url (contracted2.gif)"
contractedbackgrounds[2]="url (contracted3.gif)"

In the html document or in the ddaccordion php file? And where does it go in either one of these documents?

lol Thanks for sticking through with this, I know in some way this must be frustrating. We're nearing the end though.

EDIT: Actually, now that I've started messing with it using the arrays, I've messed everything up. I don't know how to call for which image I want to use. I have the array set up with all of the images, but the CSS can't tell the difference and I don't know how to tell it. I will make a new post with my own example for final clarification. Maybe we can wrap this up in the course of two or three more posts.

[ddadmin]

The array is in JavaScript, so anywhere within the SCRIPT tag is fine. Taking everything into account, something like:

<script type="text/javascript">

var expandedbackgrounds=[]
expandedbackgrounds[0]="url(expanded.gif)"
expandedbackgrounds[1]="url(expanded2.gif)"
expandedbackgrounds[2]="url(expanded3.gif)"

var contractedbackgrounds=[]
contractedbackgrounds[0]="url(contracted.gif)"
contractedbackgrounds[1]="url(contracted2.gif)"
contractedbackgrounds[2]="url(contracted3.gif)"

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" 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: ["", "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: "normal", //speed of animation: "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
		if (state=="block"){
  			header.style.background=expandedbackgrounds[i]
		}
 		else{ //if it's contracted
  			header.style.background=contractedbackgrounds[i]
		}
	}
})

</script>