CODEWITHSUNDEEP
javascriptjquery
Corey Bush
Corey Bush

Reputation: 183

jQuery remove class of parent of parent

I'm working on a little vertical accordion and I ran into a snag.

Upon clicking a div, that div opens up to fill the screen... I'm trying to reverse this upon clicking the "close button" div, but it's not working for me.

Here is my code... https://codepen.io/Finches/pen/mpyKrL

$(document).ready(function() {
  $('.shutter').click(function() {
    if (!$(this).hasClass('shutterExpanded')) {
      $(this).addClass('shutterExpanded');
      $('.wrapper').addClass('shutterOpen');
      $(this).children(".shutterContent").fadeIn(400).addClass("show-content");
      $(this).children(".shutterBG").addClass("bg-opacity");
    }
  });
  $('.close-btn').click(function() {
    $(this).parent().parent().removeClass("shutterExpanded");
    $('.wrapper').removeClass('shutterOpen');
    $(this).parent(".shutterContent").fadeOut(250).removeClass("show-content");
    $(this).parent().siblings(".shutterBG").removeClass("bg-opacity");
  });
});

Any help here?

Upvotes: 2

Views: 144

Answers (1)

Hanif
Hanif

Reputation: 3797

Try following code. Actually it is happening for you clicking each time on ".shutter". Because when you clicking on close button it is also inside of ".shutter" div that why it is collapsing then again opening.

$(document).ready(function() {
  $('.shutter').click(function() {
    if (!$(this).hasClass('shutterExpanded')) {
      $(this).addClass('shutterExpanded');
      $('.wrapper').addClass('shutterOpen');
      $(this).children(".shutterContent").fadeIn(400).addClass("show-content");
      $(this).children(".shutterBG").addClass("bg-opacity");
    }
  });
  $('.close-btn').click(function(e) {
    e.stopPropagation(); // Key line to work perfectly
    if ($(this).parent().parent().hasClass("shutterExpanded")) {
      $(this).parent().parent().removeClass("shutterExpanded");
    };
    $('.wrapper').removeClass('shutterOpen');
    $(this).parent(".shutterContent").fadeOut(250).removeClass("show-content");
    $(this).parent().siblings(".shutterBG").removeClass("bg-opacity");
  });
});

Upvotes: 3

Related Questions