jQuery remove class of parent of parent

Question

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?

Answer 1

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");
  });
});