CODEWITHSUNDEEP
jquery
MR.Don't know
MR.Don't know

Reputation: 235

Reverse click jquery

When I click on a class .BOX-BTN, my code adds a new class .full which adds an overlay. But when I click a second time, nothing happens and class remains active.

Upon the second click on box-btn, I want to return to the starting position, then on every click is changing class.

How can I achieve this?

$(function($) {
  $(document).on('click', '.box-btn', function(event) {
    var target = $(event.target).closest('.wrapper');
    target.find('.box-title, .box-text').addClass("full");
    target.find('.image-box').addClass("full-img");
  });
});

Upvotes: 0

Views: 55

Answers (2)

Shane Abram Mendez
Shane Abram Mendez

Reputation: 415

Im not sure how your code is structured, but changing addClass to toggleClass should do the trick

$(function($) {
      $(document).on('click', '.box-btn', function(event) {
        var target = $(event.target).closest('.wrapper');
        target.find('.box-title, .box-text').togleClass("full");
        target.find('.image-box').toggleClass("full-img");

      });
    });

Upvotes: 1

charlietfl
charlietfl

Reputation: 171698

Try using toggleClass() instead so it removes those classes on second click

target.find('.box-title, .box-text').toggleClass("full");
target.find('.image-box').toggleClass("full-img");

Upvotes: 1

Related Questions