SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<div id="maps">
<div class="map-box"><h2>London &amp; South East</h2><a href="#london"><img src="http://dummyimage.com/100x100/000/fff&text=London" /></a></div>
<div class="map-box"><h2>South West, Ireland and Wales</h2> <a href="#south-west"><img src="http://dummyimage.com/100x100/000/fff&text=South+West" /></a> </div>    
<div class="map-box"><h2>South Central &amp; Home Counties</h2> <a href="#south-central"><img src="http://dummyimage.com/100x100/000/fff&text=South+Central" /></a> </div>     
<div class="map-box"><h2>North England, Northern Ireland &amp; Scotland</h2> <a href="#north"><img src="http://dummyimage.com/100x100/000/fff&text=North" /></a> </div>        
<div class="map-box"><h2>Midlands</h2> <a href="#midlands"><img src="http://dummyimage.com/100x100/000/fff&text=Midlands" /></a> </div>       
</div>
<br /><br/>
<div id="areas">
    <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>
</div>

CSS

#maps { overflow: auto; }
.map-box { float: left; }

JavaScript

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