SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

    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>

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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");
        });    
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

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