Activer/désactiver les conteneurs div de liens à l'aide de jQuery

Question

J'ai un ensemble de liens et leurs divs correspondants affichant des informations lorsqu'ils sont cliqués. Ce que je veux faire est d'utiliser jQuery, quand un lien est cliqué, le div de ce lien particulier devrait être montré, et le reste devrait se cacher. En ce moment, il affiche tous les conteneurs div, quel que soit le lien cliqué, sauf si je clique sur le même lien à nouveau [alors il bascule son div].

C'est le code jQuery je en ce moment:

   $("#babout") 
       .click(function() { 
        $("div#about").slideToggle(600); 
       }), 

      $("#bcontact") 
       .click(function() { 
        $("div#contact").slideToggle(600); 
       }), 



      $("#bsearch") 
       .click(function() { 
        $("div#search").slideToggle(600); 
       }), 

. . . Le code HTML:

<!-- Begin Search --> 
     <div id="search" style="display:none;"> 
       <input type="text" class="bsearch" name="search" value="Type and press Enter" /> 
     </div> 
     <!-- End Search --> 

    <!-- Begin About --> 
      <div id="about" style="display:none;"> 
        This is about 
      </div> 
      <!-- End About --> 

      <!-- Begin Contact --> 
      <div id="contact" style="display:none;"> 
        This is contact 
      </div> 
      <!-- End Contact --> 

       <!-- Begin Naviagtion --> 
      <div id="navigation"> 

       <ul> 
        <li><a class="main" href="">Another?</a></li> 
        <li><a id="babout">About</a></li> 
        <li><a id="bcontact">Contact</a></li> 
        <li><a id="bsearch">Search</a></li> 
        <li><a href="">RSS Feed</a></li> 
       </ul> 

      </div> 
      <!-- End Naviagtion --> 

Answer 1

donner à chacun des <div> bascule-mesure des éléments d'une classe comme ceci:

<div id="search" class="toggleDiv" style="display:none;"> 

Ensuite, vous pouvez écrire un gestionnaire au lieu d'un pour chaque lien, comme ceci:

$("#navigation li a[id]").click(function() { 
    $("#" + this.id.substr(1)).slideToggle(600) 
     .siblings('.toggleDiv').slideUp(600); 
});​ 

You can give it a try here, en aparté, c'est assez proche (mais pas exactement) de la fonctionnalité d'un accordéon, you may want to give it a look.

Answer 2

Ensuite il suffit de faire quelque chose comme ceci:

$("#babout").click(function() { 
    $("div#contact:visible").slideUp(); 
    $("div#search:visible").slideUp(); 

    $("div#about").slideToggle(600); 
});