Accordion Menu slideToggle

Accordion Menu slideToggle

Hi all

I have a simple accordion menu using div’s for the buttons and containers.

www.ttmt.org.uk/openClose2.html

The sections slide down when the btn is clicked and any open sections are closed.


$('div.NavBtn').click(function() {
	$('div.sideNavContent').slideUp('normal');
	$(this).next().slideDown('normal');
});

$("div.NavContent").hide();

In this example the section opens when the btn is clicked and then closes if the btn is clicked again

www.ttmt.org.uk/openClose.html


$('div.NavBtn').click(function() {
	$(this).next().slideToggle('normal');
});

$("div.NavContent").hide();


I want to combine both the actions into the same code.

If a btn is clicked it will open and close that section.

If a btn is clicked and another section is open the open sections will be closed.

I can’t see how to do both, can anyone help


<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="robots" content="noindex, nofollow" />
  
	<title> </title>
	
	<!--CSS-->	
	<style type="text/css" media="screen">
	 *{margin:0;padding:0;}
	 
   body{background:#ddd;}
   
   #sideNav {background:white;overflow:auto;width:330px;border: 1px solid #ccc;margin:50px;}
   
   #sideNav .NavBtn{	
   	border-top:1px dashed #999;
   	color:#444;
   	cursor: pointer;
   	float: left;
   	text-decoration:none;
   	padding:14px 10px;
   	width: 310px;
   }
   #sideNav .NavContent{
    float: left;
   	background:#f4f4f4;
    width:330px;
   }
   #sideNav .NavContent p{
     padding:10px;
   }
   
	</style>
	
</head>

<body>

        
  <div id="sideNav">
    
    <div class="NavBtn">
  	  <h2>One </h2>
  	</div>
  	<div class="NavContent">
  	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
  	</div>
	
	  <div class="NavBtn">
  	  <h2>Two </h2>
  	</div>
  	<div class="NavContent">
  	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
  	</div>
    
    <div class="NavBtn">
  	  <h2>Three </h2>
  	</div>
  	<div class="NavContent">
  	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
  	</div>    
	
  </div><!--sideNav-->
        	
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
  <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  
    $('div.NavBtn').click(function() {
    	$('div.NavContent').slideUp('normal');
    	$(this).next().slideDown('normal');
    	//$(this).next().slideToggle('normal');
    });

    $("div.NavContent").hide();
    
  </script>
</body>
</html>      

As with most of jQuery’s effect methods, you can perform a callback when the animation finishes. This means that you could add (or remove) a class for example that denotes the item’s state.

e.g.


element.slideToggle("normal", function() {
  $(this).toggleClass("open");
});

Then before you go to slide down any elements, you can close all open elements and remove the “open” class. (And as I’m doing in this example, simply using the slideToggle() and toggleClass() methods to let jQuery do all the hard work.)

Spoiler alert - this code works ## :stuck_out_tongue:


$('div.NavBtn').click(function() {
    if (!$(this).next().hasClass("open")) {
        //only close the open ones if they don't belong to the currently clicked item
        $('div.NavContent.open').slideUp('normal', function() {
            $(this).toggleClass("open");
        });
    }

    $(this).next().slideToggle('normal', function() {
        $(this).toggleClass("open");
    });    
});