jQuery ordre de bascule

Question

J'essaie de basculer certains divs et en même temps définir un état "actif" sur les liens. Voici mon code.

$(".product_buy").hide(); 
$(".product_geo").hide(); 

$("a.buy, a.geo").click(function() 
    { 
     $("#" + this.className + "_" + this.rel).slideToggle("fast"); 
     $(this).toggleClass("item_active"); 

     if (this.className == "geo") 
      { 
       $("#info_" + this.rel).slideToggle("fast"); 
      } 

     return false; 
    }); 


<ul class="title_menu"> 
    <li class="item"><a href="javascript:void(0);" class="geo" rel="blabla" title="Toggle geometry">Geometry</a></li> 
    <li class="item"><a href="javascript:void(0);" class="buy" rel="blabla" title="Toggle purchase options">Buy</a></li> 
</ul> 

<div class="product_buy" id="buy_blabla"> 
    <div class="block"> 
     <p>Buy bla bla</p> 
    </div> 
</div> 

<div class="product_geo" id="geo_blabla"> 
    <img src="geo_blabla.jpg" title="Bla bla geometry" width="750" height="857"/> 
</div> 

<div class="prod_info" id="info_blabla"> 
    <p>Info bla bla</p> 
</div> 

Il bascule, mais pas tous en même temps. C'est correct si les deux divs "buy" et "geo" sont montrés en même temps, mais l'état "actif" du lien semble gâcher les choses.

Je suis un noob, alors n'hésitez pas à me moquer de moi. Edit: Résolu avant que j'ai vu la réponse de Nick, donc sa solution est probablement meilleure.

$(".product_buy").hide(); 
    $(".product_geo").hide(); 

    $("a.buy, a.geo").click(function() 
     { 
      var itemType = $(this).attr("rev"); 
      var itemName = $(this).attr("rel"); 

      $("#" + itemType + "_" + itemName).slideToggle("fast"); 
      $(this).toggleClass("item_active"); 

      if (itemType == "geo") 
       { 
        $("#info_" + itemName).slideToggle("fast"); 
       } 

      return false; 
     }); 

Answer 1

Je vais suggérer un changement total d'approche ici qui se dégradera également gracieusement sans JavaScript. Utilisez le href pour aller à l'élément d'un ID que vous voulez, comme ceci:

<ul class="title_menu"> 
    <li class="item"><a href="#geo" title="Toggle geometry">Geometry</a></li> 
    <li class="item"><a href="#buy" title="Toggle purchase options">Buy</a></li> 
</ul> 

<div id="buy" class="content"> 
    <div class="block"> 
    <p>Buy bla bla</p> 
    </div> 
</div> 

<div id="geo" class="content"> 
    <div> 
    <img src="geo_blabla.jpg" title="Bla bla geometry" width="750" height="857"/> 
    </div> 

    <div class="prod_info"> 
    <p>Info bla bla</p> 
    </div> 
</div> 

Ensuite, votre jQuery devient également plus simple beaucoup, comme ceci:

$(".content").hide(); 
$("ul.title_menu a").click(function(e) { 
    $(this.hash).slideToggle("fast"); 
    $(this).toggleClass("item_active"); 
    e.preventDefault(); 
}); 

You can test it out here. Qu'est-ce que cela fait est que href="#geo" en tant que sélecteur $("#geo") pour basculer le bon élément. Le class="content" est donc nous pouvons les cacher tous ... vous pouvez aussi utiliser la même classe en tant que mécanisme pour afficher uniquement un à la fois (en se cachant d'autres éléments de contenu, like this.

L'autre grand avantage ici est sans JavaScript activé, tous les divs montreront et les liens feront défiler vers l'élément approprié ... une belle vue dégradée qui fonctionne toujours pour l'utilisateur