title: Check if divs are visible with jQuery
body: <p>I am attempting a one page design using loads of jQuery.  I have a few main navigation elements and depending on which is clicked, different divs are shown or hidden.  For example the html:</p>
  
  <pre><code>&lt;div class="box a"&gt;
      &lt;div class="inner"&gt;
          &lt;a class="boxLink circle black" href="#"&gt;Link a&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="box a1 hidden"&gt;
      &lt;div class="inner circle"&gt;
          &lt;a class="boxLink" href="#"&gt;a1&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="box a2 hidden"&gt;
      &lt;p class="green"&gt;a2&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="box b"&gt;
      &lt;div class="inner"&gt;
          &lt;a class="boxLink circle black" href="#"&gt;Link b&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="box b1 hidden"&gt;
      &lt;div class="inner circle"&gt;
          &lt;a class="boxLink" href="#"&gt;b1&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="box b2 hidden"&gt;
      &lt;p class="green"&gt;b2&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the jQuery</p>
  
  <pre><code>$(".a").click(function(){
      $('.b').hide();
      $('.b1').hide();
      $('.b2').hide();
      $('.a1').slideDown({
          duration:500,
          complete:function(){
              $('.a2').slideDown('1000');
          }
      });
      return false
  });
  
  $(".b").click(function(){
      $('.a').hide();
      $('.a1').hide();
      $('.a2').hide();
      $('.b1').slideDown({
          duration:500,
          complete:function(){
              $('.b2').slideDown('1000');
          }
      });
      return false
  });
  </code></pre>
  
  <p>What is a better, more efficient way to write this and check if unwanted divs are visible?  I did read <a href="https://stackoverflow.com/questions/3106265/jquery-how-to-hide-other-visible-divs-on-click">this solution</a>  but I am hoping to keep this as div blocks and not as a list.</p>