Jquery - Afficher/Masquer/basculer DIVs plusieurs

Question

Je cherche à atteindre les résultats suivants:

• Affichage 5 images consécutives
• Cliquez sur une image pour afficher le contenu lié à cette image
• Cliquez une autre image pour montrer que le contenu connexe et cacher le contenu précédent

Voici mon balisage pour les images:

<div id="maps"> 

<div class="map-box"><h2>London &amp; South East</h2><a href="#"><img src="/img/map_london.jpg" /></a></div> 
<div class="map-box"><h2>South West, Ireland and Wales</h2> <a href="#"><img src="/img/map_south_west.jpg" /></a> </div>  
<div class="map-box"><h2>South Central &amp; Home Counties</h2> <a href="#"><img src="/img/map_south_central.jpg" /></a> </div>  
<div class="map-box"><h2>North England, Northern Ireland &amp; Scotland</h2> <a href="#"><img src="/img/map_north.jpg" /></a> </div>   
<div class="map-box"><h2>Midlands</h2> <a href="#"><img src="/img/map_midlands.jpg" /></a> </div>  

</div> 

Lorsqu'un utilisateur clique sur l'image, je voudrais afficher le contenu d'un DIV directement en dessous. Comme si:

<div id="london"> 
<p>content london</p> 
</div> 

<div id="south-west"> 
<p>content south west</p> 
</div>  

<div id="south-central"> 
<p>content south central</p> 
</div>   

<div id="north"> 
<p>content north</p> 
</div>  

<div id="midlands"> 
<p>content midlands</p> 
</div> 

Ceci est clairement réalisable via jQuery afficher/cacher, mais de tous les exemples que j'ai regardé sur Stack Overflow, je ne peux pas obtenir la bonne combinaison.

Des conseils très appréciés, merci.

Answer 1

Je donnerais vos points d'ancrage un doit correspondre à la <div id="xxxxx"> qu'ils vont avec, comme ceci:

<a href="#london"><img src="/img/map_london.jpg" /></a> 

Alors ce qu'ils sont enveloppés dans dessous, il semble dire comme ceci:

<div id="areas"> 
    <div id="london"> 
    <p>content london</p> 
    </div> 
    .... 
</div> 

Vous pouvez utiliser JavaScript comme ceci:

$(".map-box a").click(function(e) { 
    $("#areas div").hide(); 
    $(this.hash).show(); 
    e.preventDefault(); 
}); 
$("#areas div:not(#london)").hide(); //show only london initially 

You can give it a try here, la bonne partie à ce sujet est qu'il se dégrade aussi bien, il va montrer simplement tous les divs et faites défiler jusqu'à celle que la personne a cliqué si Javascript est désactivé.

Answer 2

Vous pouvez avoir une div vide avec votre image div. Lorsque vous cliquez sur l'image, vous pouvez définir le contenu associé comme innerHTML pour la div vide.

<div> 
<div class="map-box"><h2>London &amp; South East</h2><a href="#"><img  src="/img/map_london.jpg" /></a></div> 
<div id="london" /> 

function OnImageClicked() 
{ 
$(london).innerHTML = "<p>content london</p>"; 
} 

Answer 3

Cela pourrait aider, il devrait:

• Sélectionner tous les éléments de la classe carte-box.
• ajouter un événement click définissant une fonction anon

qui effectue les opérations suivantes:

• sélectionnez le div de contenu à mettre à jour (pas sûr de ce nom) et lui attribuer la sélection suivante à sa HTML
• remonter deux parents de l'élément "selected" et sélectionner le html de l'étiquette H2.

$('.map-box').click(function(){ $('contentDiv').html($(this).parent().parent().find('h2').html())});