Toggle Show / Hide Divs

Toggle Show / Hide Divs

I'm using the following jQuery and HTML to show and hide divs when the
links are clicked.
This works well if I click Brazil the div is shown correctly. However if I
then click America that is also shown but Brazil isn't hidden.
How do I toggle the display so only one div is show at any one time.. ?
$(document).ready(function() {
$('.toggle').prev().data('is_visible', true);
$('.toggle').hide();
$('a.togglelink').click(function() {
$(this).data('is_visible', !$(this).data('is_visible'));
$(this).parent().next('.toggle').toggle('slow');
return false;
});
});
<ul id="list">
<li><a href="#" class="togglelink">America</a></li>
<div class="toggle" style="display: block;"><p>America - USA - the
States</p></div>
<li><a href="#" class="togglelink">Brazil</a></li>
<div class="toggle" style="display: block;"><p>Brazil - Federative
Republic of Brazil</p></div>
</ul>
</div>