Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    44
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Javascript accordion slide-up problem???

    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?

    Code:
    <!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>
    Last edited by tinfanide; 08-18-2011 at 04:52 PM. Reason: Sorry! The scripts are wrong. Edited now.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •