Accordion Menu slideToggle

**ttmt** · Dec 30, 2011 02:56

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.

Code:

$('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

Code:

$('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

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" 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>

**AussieJohn** · Dec 30, 2011 04:31

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.

Code javascript:

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 ##

Code javascript:

$('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");
    });    
});

User Tag List

Thread: Accordion Menu slideToggle

Thread Tools

Display

Accordion Menu slideToggle

Bookmarks

Bookmarks

Posting Permissions