...

View Full Version : Javascript accordion slide-up problem???



tinfanide
08-18-2011, 04:38 PM
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 but
content 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 T;
function cutHeight(closeAccordionID){
var h=100;
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum