[Answered ]-Toggle element by numerical value of data attribute in django template

by

1👍

✅

In your markup the group-list element and the name-list that has to be toggled are sibling elements so you can make use of that relationship to toggle the correct element.

There is no need to have another attribute to do that.

nameDisplay = function () {
    $(".name-list").hide();
    $(".group-list").click(function () {
        $(this).next('.name-list').toggle()
    });
}

Also it will be better to use a css rule to set the default hidden state of name-list like

.name-list {
    display: none;
}

then use the click handler to make it visible

nameDisplay = function () {
    $(".group-list").click(function () {
        $(this).next('.name-list').toggle()
    });
}
👤Arun P Johny

1👍

You can simply use .next(), or other methods to traverse using the element for which event is triggered then can use .toggle() method

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

$(".group-list").click(function(){
    $(this).next(".name-list").toggle();
});

There is no need for additional attribute.

👤Satpal

Leave a comment