problem when I try to use jQuery to "show" or "hide" more information from the user
<p>This is my html code:</p>

<pre><code>&lt;span id="username_{{ member.id }}" onclick="showMembershipData('{{ member.id }}');"&gt;{{ member.user.username }}&lt;/span&gt;
</code></pre>

<p>and this is my jQuery code</p>

<pre><code>function showMembershipData(id)
    {
        $("#memberInfo_"+id).slideDown();
        $("#username_"+id).click(function(){
            hideMembershipData(id);
        });
    }

    function hideMembershipData(id) {
        $("#memberInfo_" + id).slideUp();
        $("#username_" + id).click(function() {
            showMembershipData(id);
        });
    }
</code></pre>

<p>I want the user name to be clickable and when clicked open the "more information" pane, or close it if it is opened. What happens now is:</p>

<ul>
<li>username clicked for 1 time: pane opens. </li>
<li>Clicked 2nd time: pane closes. Up to here is fine...</li>
<li>clicked 3rd time pane opens and closes 2 times in a row (i.e. 4 operations: open, close, open, close)</li>
</ul>

<p>and so on...  Why? What am I doing wrong?</p>
