Jump to content

JS accordion


tinfanide

Recommended Posts

I'm making an JS accordion and I just miss the final step.That is - say:I click menu 1, content 1 slides down (shows up).After that, I click menu 2, content 2 slides down butcontent 1 of menu 1 just display: none (abruptly disappers) but not slides up.For the slide up effect, I wrote a function called cutHeight().The cutHeight function works perfectly independently but not coherent with the accordion function.Is there anything wrong with my scripts?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>function accordion(openAccordionID){		document.getElementById("content"+openAccordionID).style.display = 	(document.getElementById("content"+openAccordionID).style.display == "none") 	? "block" : "none";		var sumAccordion;	if(document.all){		sumAccordion = document.body.getElementsByTagName("div").length/2;				}	else {sumAccordion = document.getElementsByClassName("content").length;}		for(var closeAccordionID=1; closeAccordionID<=sumAccordion; closeAccordionID++){		if(closeAccordionID == openAccordionID){continue;}		document.getElementById("content"+closeAccordionID).style.display = "none";		}	addHeight(openAccordionID);	cutHeight(closeAccordionID);		}	var h=0;	var t;	function addHeight(openAccordionID){		clearInterval(t);		document.getElementById("content"+openAccordionID).style.height = h+"px";		h+=1;		t = setInterval("addHeight('"+openAccordionID+"')",10);		if(h==100){clearInterval(t);h=0;}			}		var H=100;	var T;	function cutHeight(closeAccordionID){		clearInterval(T);		document.getElementById("content"+closeAccordionID).style.height = H+"px";		H-=1;		T = setInterval("cutHeight('"+closeAccordionID+"')",10);		if(H==0){clearInterval(T);}			}</script><style>.menu {	background-color: #6F6;	width: 200px;	height: 50px;}.content {	display: none;	background-color: yellow;	width: 200px;	height:0px;	overflow: hidden;}</style></head><body><div onclick="accordion(1)" class="menu">Menu 1</div><div id="content1" class="content">Content 1</div><div onclick="accordion(2)" class="menu">Menu 2</div><div id="content2" class="content">Content 2</div><div onclick="accordion(3)" class="menu">Menu 3</div><div id="content3" class="content">Content 3</div></body></html>

Link to comment
Share on other sites

What do u mean by this:
document.getElementById('content'+openAccordionID)

? Is that possible?

Yes, it is passing parameters.Ya may test it on ya machine. Should work as on my machine.
Link to comment
Share on other sites

Yes, it is passing parameters.Ya may test it on ya machine. Should work as on my machine.
yeah, i know that's what you are doing! what i dont understand is why you are passing a parameter with + sign on it. Are you passing two values to the getElementById() function or wat?
Link to comment
Share on other sites

yeah, i know that's what you are doing! what i dont understand is why you are passing a parameter with + sign on it. Are you passing two value to the getElementById() function or wat?
No. It's the syntax.
<div onclick="accordion(1)" class="menu">Menu 1</div><div id="content1" class="content">Content 1</div><div onclick="accordion(2)" class="menu">Menu 2</div><div id="content2" class="content">Content 2</div><div onclick="accordion(3)" class="menu">Menu 3</div><div id="content3" class="content">Content 3</div>

In the HTML, for each id, the structure is "content" + a number.In JS, a number never goes with " ".In this case, I use openAccordionID as a variable for the number that is passed from my onclick events in the HTML.Since opanAccordionID is a var and a var is never embraced with " ".That's where ya seemed not sure about.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...