title: mutlple jquery toggles how to go back to default?
body: <p>I have 2 click elements (divs - #click1, #click2), and 3 content elements (tables - #default, #table1, #table2).</p>
  
  <p>when you click #click1, it hides #default (and #table2 if needed), and shows #table1, and #click2 hides other tables, and shows #table2.</p>
  
  <p>if all #table1 and #table2 are hidden, I would like to have #default show, and it is not acting like that.</p>
  
  <p>The best I could come up with does not work :</p>
  
  <pre><code>$( "#default:hidden" ) &amp;&amp; $( "#table1:hidden" ) &amp;&amp; $( "#table2:hidden" ) {
      $( "#default" ).show();
  });
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div id="click1" class="button"&gt;
      Click 1
  &lt;/div&gt;
  &lt;div id="click2" class="button"&gt;
      Click 2
  &lt;/div&gt;
  &lt;div class="tables"&gt;
      &lt;table id="default"&gt;
          &lt;tr&gt;&lt;td&gt;Default Info&lt;/td&gt;&lt;td&gt;Default Info&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Default Info&lt;/td&gt;&lt;td&gt;Default Info&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;table id="table1"&gt;
          &lt;tr&gt;&lt;td&gt;Info1&lt;/td&gt;&lt;td&gt;info1&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Info1&lt;/td&gt;&lt;td&gt;info1&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
      &lt;table id="table2"&gt;
          &lt;tr&gt;&lt;td&gt;Info2&lt;/td&gt;&lt;td&gt;info2&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;Info2&lt;/td&gt;&lt;td&gt;info2&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>css:</p>
  
  <pre><code>.container {
  width:80%;
  text-align:center;
  margin:0 auto;
  }
  .button {
  width:100px;
  display:inline-block;
  border:2px solid blue;
  }
  .tables {
  width:50%;
  margin:0 auto;
  }
  table {
  border:1px solid red;
  text-align:center;
  width:100%;
  }
  #table1, #table2 {
  display:none;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$( "#click1" ).click(function() {
  $( "table2" ).hide("slow", function(){});
  $( "#default" ).hide("slow", function(){});
  $( "#table1" ).toggle("slow", function(){});
  });
  $( "#click2" ).click(function() {
  $( "#table1" ).hide("slow", function(){});
  $( "#default" ).hide("slow", function(){});
  $( "#table2" ).toggle("slow", function(){});
  });
  </code></pre>
  
  <p>Here is my fiddle: <a href="http://jsfiddle.net/SBNxY/103/" rel="nofollow">http://jsfiddle.net/SBNxY/103/</a></p>