CODEWITHSUNDEEP
javascriptjquery
Alex Zahir
Alex Zahir

Reputation: 969

jQuery how to achieve a toggleClick functionality

I have div section that would hide/show based on clicking a button. And I'm using this jQuery code to show/hide divs based on clicking the "pop-design1", "pop-design2", "pop-design3" buttons.


When the 'pop-design1' button is clicked once it shows the div. Now what I want to achieve is that when it is clicked again it does the opposite of the script.

I think jQuery had a function toggleClick once that could achieve something like this but it is deprecated now.

Thanks for your time

Thanks

Upvotes: 0

Views: 76

Answers (1)

Shaunak D
Shaunak D

Reputation: 20636

Instead of removeClass() or addClass(), use toggleClass() and instead of css('display',...) use .toggle()

$('.pop-design1').click(function(){
    $(".design-preview li:not(.design-preview2).selected").removeClass('selected');
    $(".design-list li:not(.design-list2).selected").removeClass('selected');
    $(".design-preview2").toggleClass('selected');
    $(".design-list2").toggleClass('selected');
    $(".overlay").toggle();
});

Upvotes: 2

Related Questions