Hide the visible content before view the next content
<p>When you click on the link with <code>id="viewers"</code> to view it's content and then, after it's visible, when you click on the link with <code>id="voters"</code>, <code>id="viewers"</code> will hide and then show <code>id="voters"</code>'s content. How can I do that? I've tried for myself but I didn't come so far :/ Here is my code:</p>

<pre><code>$('#view_voters').click(function() {
    if($('#viewers').is(':visible')) {
        $('#viewers').slideUp('slow');
    }

    if($('#viewers').is(':hidden')) {
        $('#voters').slideToggle('slow');
    }
});
</code></pre>

<p>HTML</p>

<pre><code>echo '&lt;div class="paddingbottom-10" id="voters" style="display: none;"&gt;';
    echo '&lt;table width="100%" cellpadding="0" cellspacing="0" class="blog-viewers"&gt;';
        # content
    echo '&lt;/table&gt;';
echo '&lt;/div&gt;';
</code></pre>

<p>Thanks in advance.</p>
