How to show/hide multiple DIVs with child DIVs

Question

I have attempted to do multiple DIVS with Child Divs that open text divs when clicked.

Please see this thread:
jQuery - How to show/hide multiple DIVs with child DIVs

I am having trouble. Here's where I have:
www.gehko.co.uk/rohithSK/upcoming_rohith_katbamna3.html

Here is the JavaScript:

<script type="text/JavaScript">
$(".map-box a").click(function(e) {
    $("#areas > div").hide();
    $(this.hash).show();
    e.preventDefault();
});
$("#areas div").not("#london, #london div").hide();
</script>

heres the html:

<div id="maps">
<div id="upcomingNewOne">
<div class="map-box"><a href="#london"><img src="images/paper4Normal.gif" border="0"/></a></div></div>

<div id="upcomingNewTwo">
<div class="map-box"><a href="#south-west"><img src="images/paper3Normal.gif" border="0"/></a></div></div>  

<div id="upcomingNewThree">
<div class="map-box"><a href="#south-central"><img src="images/paper2Normal.gif" border="0"/></a></div></div>

<div id="upcomingNewFour">
<div class="map-box"><a href="#north"><img src="images/paper1Normal.gif" border="0"/></a></div></div>
</div>


<br /><br/>
<div id="areas">
<div id="f1">
<div></div>
<div>f1</div>
</div>
<div id="f2">
<div></div>
<div>f2</div>
</div>
<div id="f3">
<div></div>
<div>f3</div>
</div>
<div id="f4">
<div></div>
<div>f4</div>
</div>
</div>

Can anyone help?

@RichKelly http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery / http://stackoverflow.com/questions/547384/where-do-you-include-the-jquery-library-from-google-jsapi-cdn — Andreas, Apr 25 '13 at 09:09

score 0 · Answer 1 · answered Apr 24 '13 at 19:49

You can do this:

$(".map-box a").click(function (e) {
    e.preventDefault();
    $("#areas > div").hide();
    $($(this).attr('href')).show();    
});

In place of using $(this.hash).show(), you need to do $($(this).attr('href')).show(). This will get the clicked link href and open the div with that id.

How to show/hide multiple DIVs with child DIVs

1 Answers1