Question

This is my html code:

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

and this is my jQuery 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);
        });
    }

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:

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

and so on… Why? What am I doing wrong?

Answer 1

let’s change the code a little bit, shall we

<span 
    id="username_{{ member.id }}" 
    class="member"
    data-memberid="{{ member.id }}">{{ member.user.username }}</span>

on the jQuery side

$(".member").toggle(
    function() {  // click - show
        var id = $(this).attr("data-memberid");
        $("#memberInfo_" + id).stop().slideDown();
    },
    function() {  // click again - hide
        var id = $(this).attr("data-memberid");
        $("#memberInfo_" + id).stop().slideUp();

     });

easy 🙂