Search code examples
javascriptjqueryaddclassremoveclasstoggleclass

Isolating add/remove class to clicked item

Currently I have a accordion menu, each time .responsive-accordion-head is clicked I'm telling it to switch classes as follows:

$('.responsive-accordion-head').click(function () {

    if ( $( '.responsive-accordion-head i' ).hasClass( "plus-2" ) ) {

        $('.responsive-accordion-head i').removeClass("plus-2");
        $('.responsive-accordion-head i').addClass("minus-2");

    } else {
        $('.responsive-accordion-head i').removeClass("minus-2");
        $('.responsive-accordion-head i').addClass("plus-2");
    }

});

The problem I have is that the code above changes the classes for all .responsive-accordion-head elements. I need it to be specific to the clicked item only. How do I do this?

Solution

  • All that can probably be simplified to this:

    $('.responsive-accordion-head').click(function () {
    $(this).find('i').toggleClass('plus-2 minus-2');
});