Reveal div inside a TD when a tag is clicked, close others
<p>I have TD elements with anchor tag inside them and divs which I want to be revealed when the anchor tag is clicked. Also, I want others to close when any one of them is clicked, if it;s open already.</p>

<p>HTML:</p>

<pre><code>&lt;td&gt;
&lt;a href="#"&gt;&lt;img src="images/1.jpg" /&gt;&lt;/a&gt;
&lt;div class="test"&gt;&lt;p&gt;test&lt;/p&gt;&lt;/div&gt;
&lt;/td&gt;

&lt;td&gt;
&lt;a href="#"&gt;&lt;img src="images/1.jpg" /&gt;&lt;/a&gt;
&lt;div class="test"&gt;&lt;p&gt;test&lt;/p&gt;&lt;/div&gt;
&lt;/td&gt;   
</code></pre>

<p>I tried with this JQuery but for some reason I have to click twice for it to show the div the first time, and if I then click on the second one the first one doesn't close. I don't need to add any classes.</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function() {
    $('.test').hide();
    $('td a').on('click', function() {
        var state = $(this).next('.test').is('.open');
        if (state) {
            $(this).removeClass('active').next('.test').removeClass('open').show();
        }else{
            $(this).addClass('active').next('.test').addClass('open').hide()
                   .siblings('.test').removeClass('open').show().end()
                   .siblings('.test').not(this).removeClass('active');
        }
    });
});
&lt;/script&gt;   
</code></pre>
