CODEWITHSUNDEEP
javascriptjquerycss
procopy
procopy

Reputation: 1

Target currently clicked instance of element

I have multiple instances of a button element:

<div id="openambiance" class="openclose leftside"></div>
<div id="opendesign" class="openclose rightside"></div>
<div id="openperform" class="openclose leftside"></div>

They carry different ID's, as clicking on each of them opens different panel. I would like currently open panel to switch its open/close button background, as per definition in .openclose-active. Reality however is, they are all getting affected. My initial code looked like this and I quickly realised why they are all getting affected:

$(document).ready(function() {
    $("#openambiance").click(function(e){
        $("#hiddenambiance").slideToggle(600,"easeInOutQuint");
        $(".openclose").toggleClass("openclose-active");
    });
});

So I tried targeting specific elements:

$(this).find(".openclose").toggleClass( "openclose-active" );

That failed, so I went on to .siblings, .next and .parent, but with no luck. They are still either all switched or only previous instances get switched. I'm lost :(

Upvotes: 0

Views: 69

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

this is the element you are looking for

$(document).ready(function() {
    $("#openambiance").click(function(e){
        $("#hiddenambiance").slideToggle(600,"easeInOutQuint");
        $(this).toggleClass("openclose-active openclose");
    });
});

You are clicking on the button which has the class openclose, so you need to toggle the class for this element not for any of its descendants

Upvotes: 2

Related Questions