Essayer de basculer plusieurs DIV avec Jquery

Question

J'ai essayé de faire fonctionner cette fonction pendant un certain temps maintenant. J'ai 11 divs différents qui sont cachés par défaut. Chacun a un bouton "trigger" qui est supposé les faire s'ouvrir. J'ai été capable de le faire avec une série de fonctions beaucoup plus longue pour chaque div spécifique (qui a fini par être d'environ 175 lignes de code!). Je voulais condenser en une seule fonction qui ferait la même chose à savoir: déclencheur 1 est cliqué - div 1 ouvre/déclencheur 1 est cliqué à nouveau, div 1 se ferme etc, etc

Voici mon script à partir de maintenant

$(document).ready(function() { 

    $("[class^='ShowVehicles']").toggle(function() { 
    alert("click happened"); 
     $("[class^='HiddenVehicles']").slideDown(1000); 

      }, 
     function() { 
     $("[class^='HiddenVehicles']").slideUp(1000); 


    }); 


}); 

Il ouvre actuellement tous les divs "HiddenVehicles" et je dois le rendre plus spécifique. Je suis assez nouveau à jquery donc je suis à court d'idées. Merci d'avance les gars!

Edition - Merci pour tous les types d'aide, voici la solution que je suis venu avec:

$(document).ready(function() { 

    $("div.WrapIt").toggle(

    function(){ $(".HiddenVehicles", this).slideDown(1000); 
    $("img.imgSwap" , this).attr("src","assets/images/SelectBySize/SelectBySize_HideAll.gif"); 
    }, 

    function(){ $(".HiddenVehicles", this).slideUp(1000); 
    $("img.imgSwap" , this).attr("src","assets/images/SelectBySize/SelectBySize_ShowAll.gif") 
    } 

); 

    $(".ShowEveryThing").toggle(
function() { $(".WrapIt .HiddenVehicles").slideDown(1000); 
$("img.imgSwap").attr("src","assets/images/SelectBySize/SelectBySize_HideAll.gif"); 
$("img.buttonSwap").attr("src","assets/images/SelectBySize/SelectBySize_HideBtn.gif"); 
    }, 
    function(){ $(".WrapIt .HiddenVehicles").slideUp(1000); 
    $("img.imgSwap").attr("src","assets/images/SelectBySize/SelectBySize_ShowAll.gif"); 
    $("img.buttonSwap").attr("src","assets/images/SelectBySize/SelectBySize_ShowBtn.gif"); 
    }); 

}); 

Je créé un div wrapper et avait le feu fonction quand ce div a été cliqué. J'ai également inclus un échange d'image et une fonction show all.

Answer 1

Ce que vous voulez faire est d'obtenir une référence à un <div> spécifique à partir de la fonction que vous avez définie. Dans les fonctions définies, vous devriez pouvoir obtenir une référence au bouton en utilisant $ (this). En fonction de votre mise en forme, vous devriez maintenant être en mesure d'obtenir le

Supposons que votre balisage est:

<div> 
    <input type="button" class="ShowVehicles" /> 
    <div class="HiddenVehicles"></div> 
</div> 

Vous pouvez maintenant changer votre code à quelque chose comme ce qui suit:

$(".ShowVehicles").toggle(function() { 
     $(this).siblings(".HiddenVehicles").slideDown(1000); 
    }, 
    function() { 
     $(this).siblings(".HiddenVehicles").slideUp(1000); 
    } 
}); 

La clé ici est l'appel à siblings(), cela va retourner tous les éléments qui sont "à côté" du bouton (puis filtrer par classe HiddenVehicles), qui dans ce cas est juste votre <div>. Selon la manière dont ils sont positionnés l'un par rapport à l'autre, vous devrez peut-être utiliser l'un des autres jQuery traversing functions.

Answer 2

Vous devez en quelque sorte attacher les boutons show/hide à leurs divs respectifs sur lesquels ils vont agir.

Vous pouvez le faire en les encapsulant à l'intérieur d'un seul élément <LI> ou en leur donnant des ID communs pour identifier quel bouton contrôle quelle div.

Voici le <LI> exemple:

<ul id="playground"> 
    <li> 
    <div>HELLO WORLD 1</div> 
    <button>Show/Hide 1</button> 
    </li> 
    <li> 
    <div>HELLO WORLD 2</div> 
    <button>Show/Hide 2</button> 
    </li> 
    <li> 
    <div>HELLO WORLD 3</div> 
    <button>Show/Hide 3</button> 
    </li> 
</ul> 

Et la fonctionnalité jQuery serait:

jQuery("#playground button").click(function(){ 
    $(this).closest("div").toggle() 
}) 

Le code JS dépend en grande partie de ce que votre structure HTML est donc si vous décidez de le rendre significativement différent alors certains des sélecteurs jQuery devront être ajustés

Answer 3

Essayez ceci:

<span class="header">Item1</span> 
<p style="display: none;">This is the content of item1...</p> 
<span class="header">Item2</span> 
<p style="display: none;">This is the content of item2...</p> 

---

$(".header").click(function() { $(this).next("p").slideToggle("slow"); });