title: Hide all divs except one
body: <p>I'd like to hide a complete div container except one div.</p>
  <p>So, on startup just show div id &quot;box_5&quot; and hide the rest.
  When I click button 1 show everything and when I click button 2 hide everything again.</p>
  <p>The problem is when I hide the &quot;wrapper&quot; div it is hiding everything including id=box_5.</p>
  <p>I think the problem is the div is within the wrapper div but I don't know a work-around?</p>
  <pre><code>&lt;button id=&quot;button_1&quot;&gt;show&lt;/botton&gt;
  &lt;button id=&quot;button_2&quot;&gt;hide&lt;/botton&gt;
  
  &lt;div id=&quot;wrapper&quot;&gt;
  &lt;div id=&quot;box_1&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;box_2&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;box_3&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;box_4&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;box_5&quot;&gt;always show this&lt;/div&gt;
  &lt;div id=&quot;box_6&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;box_7&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;box_8&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;box_9&quot;&gt;&lt;/div&gt;
  &lt;div id=&quot;box_10&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  
  
  $(document).ready(function() {
      $('#wrapper').not(&quot;:eq(#box_5)&quot;).hide();
      $('id=&quot;button_1&quot;').click(function() {
          $('#wrapper').show();
          $('id=&quot;button_2&quot;').click(function() {
              $('#wrapper').not(&quot;:eq(#box_5)&quot;).hide();
          });
  
      });
  </code></pre>