title: Toggle Show / Hide Divs
body: <p>I'm using the following jQuery and HTML to show and hide divs when the links are clicked.</p>
  
  <p>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.</p>
  
  <p>How do I toggle the display so only one div is show at any one time.. ?</p>
  
  <pre><code>$(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;
      });
  });
  
  &lt;ul id="list"&gt;
  &lt;li&gt;&lt;a href="#" class="togglelink"&gt;America&lt;/a&gt;&lt;/li&gt;
  &lt;div class="toggle" style="display: block;"&gt;&lt;p&gt;America - USA - the States&lt;/p&gt;&lt;/div&gt;
  
  &lt;li&gt;&lt;a href="#" class="togglelink"&gt;Brazil&lt;/a&gt;&lt;/li&gt;
  &lt;div class="toggle" style="display: block;"&gt;&lt;p&gt;Brazil - Federative Republic of Brazil&lt;/p&gt;&lt;/div&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>