Reputation: 235
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
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
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