Check if divs are visible with jQuery
<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="http://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>
