Jump to content

JS accordion


tinfanide
 Share

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? Edited by O. Samuel
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...