Toggle element visibility with jQuery!
<p>I have the following markup:</p>

<pre><code>&lt;div class="header"&gt;Text&lt;/div&gt;
&lt;div class="hiddenArea"&gt;sdsada&lt;/div&gt;

&lt;div class="header"&gt;Text2&lt;/div&gt;
&lt;div class="hiddenArea"&gt;sdsada&lt;/div&gt;
</code></pre>

<p>and the following jQuery:</p>

<pre><code>$('.header').click(function() {
        var t = $(this).next('.hiddenArea').slideToggle();
    });
</code></pre>

<p>When the hiddenArea is revealed I want to hide the other hiddenArea if it is visible?
I want to make this so that I can add other headers and hiddenAreas if I need them.</p>

<h3>Update:</h3>

<p>Thanks Guys, ended up doing this:</p>

<pre><code>$('#messages .header').click(function() {
  if (!$(this).next().is(':visible')) {
    $('.hiddenArea').slideToggle();
  }
});
</code></pre>
