title: jquery toggle/show&hide divs
body: <p>I have this html structure:</p>
  
  <pre><code>&lt;div id="home"&gt;
  
      &lt;div class="section_header"&gt;
          &lt;h1 class="left" data-target="newest"&gt;&lt;?=lang('home_newest');?&gt;&lt;/h1&gt;
          ...
      &lt;/div&gt;
      &lt;div id="newest"&gt;
          ...
      &lt;/div&gt;
  
      &lt;div class="section_header"&gt;
          &lt;h1 class="left" data-target="best"&gt;&lt;?=lang('home_newest');?&gt;&lt;/h1&gt;
          ...
      &lt;/div&gt;
      &lt;div id="best"&gt;
          ...
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>What I am trying to do is a toggle/show&amp;hide function to work on click <strong>.section_header > h1</strong> to show the div with the id defined in data-target inside h1 tag and hide the others, but always having one open and the #newest open by default on page load.</p>
  
  <p>I have tried:</p>
  
  <pre><code>$('.section_header h1').click(function(){
      var selected = $(this).data('target');
      //$('#'+selected).hide().filter('#'+selected).show();
      $('#home &gt; #'+selected).hide();
  }).first().click();
  </code></pre>
  
  <p>The commented line doesn't work, but the .hide only it does.</p>
  
  <p>I found this: <a href="http://www.learningjquery.com/2007/02/more-showing-more-hiding" rel="nofollow">http://www.learningjquery.com/2007/02/more-showing-more-hiding</a> and thought it could work but I didn't succeed to tell it which div to close and show</p>
  
  <p><strong>Edit:</strong>
  There is one more thing, how can it be done that when clicked on the visible div to close it and open the next one?</p>