Dynamic DIV content

by ChrisStanyon

HTML

<a class="country" href="#" data-div="#canton">Canton</a> |
<a class="country" href="#" data-div="#athens">Athens</a> |
<a class="country" href="#" data-div="#macon">Macon</a> |
<a class="country" href="#" data-div="#albany">Albany</a>

<div id="response">Click the city for more info</div>

<div class="info" id="canton">This is the Canton info</div>
<div class="info" id="athens">This is the Athens info</div>
<div class="info" id="macon">This is the Macon info</div>
<div class="info" id="albany">This is the Albany info</div>

CSS

.info { display:none; }
#response { border: 3px solid #0066CC; border-radius: 20px 20px 20px 20px;padding: 10px; margin: 10px 0px }

JavaScript

$('.country').click(function(e) { 
    e.preventDefault();
    $('#response').html($($(this).data('div')).html());
});