title: Using jQuery show/hide nested divs
body: <p>I can't get the following jquery to work for example if I have clicked a box and leave it open and then click another box the second box clicked closes the first box but the second box is not displayed until I click the second box again how can I get my code so that the second box for example closes all other open boxes and the displays its contents with out clicking it a second time?</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="button"&gt;
      &lt;a class="remove"&gt;Remove&lt;/a&gt; 
      &lt;a class="time"&gt;Time&lt;/a&gt;
      &lt;a class="space"&gt;Space&lt;/a&gt; 
      more links......
  
      &lt;div class="container"&gt;
          &lt;div class="firs-container"&gt;
              .......
          &lt;/div&gt;
  
          &lt;div class="sec-container"&gt;
              .......
          &lt;/div&gt;
  
          &lt;div class="third-container"&gt;
              .......
          &lt;div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQuery code:</p>
  
  <pre><code>$(document).ready(function() {
      $('a.remove, a.cancel').click(function(){
          $(this).closest('.button').find('.container:first').children().hide();
          $(this).closest('.button').find('.container:first').fadeToggle('slow', 'linear');
          $(this).closest('.button').find('.sec-container:first').fadeToggle('slow', 'linear');
          // prevent default action
          return false;
      }); 
  });
  </code></pre>