Jquery - show/hide/toggle multiple DIVs

Question

Hello

I am looking to achieve the following:

• Display 5 images in a row
• Click on an image to show content related to that image
• Click another image to show that related content, and hide the previous content

Here is my markup for the 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>

When a user clicks on the image, I would like to display the contents of a DIV directly beneath it. Like so:

<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>

This is clearly achievable via jQuery show/hide, but from all the examples I've looked at on Stack Overflow, I can't get the right combination.

Any tips much appreciated, thanks.

Answer 1

You can have a empty div with you image div. When the image is clicked you can set the associated content as innerHTML for the empty div.

<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 2

This might help, it should:

• Select all elements of the class map-box.
• add a click event defining an anon function

which does the following:

• select the content div to update (not sure of that name) and assign the following selection to it's HTML
• go up two parents of the "selected" element and select the html of the H2 tag.

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

Answer 3

I would give your anchors an has to correspond to the <div id="xxxxx"> that they go with, like this:

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

Then whatever they're wrapped in beneath, say it looks like this:

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

You could use JavaScript like this:

$(".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, the good part about this is it also degrades well, it'll simply show all divs and scroll down to the one the person clicked if JavaScript is disabled.