jQuery при повторном нажатии, должно скрыть поле (как переключатель)

Question

У меня есть следующий пример:

https://codepen.io/baidoc/pen/LYVvOZq

jQuery(function ($) {
  $(".box").click(function() {
    $(".box").removeClass("active");
    $(this).addClass("active");
    $(".boxContent").removeClass("show-content");
    var target = $(this).attr("target");
    $(".boxContent_" + target).addClass("show-content");
  });
});

2 Ящики, по умолчанию деактивированные (скрытые) и только один раз щелкнувшие, содержимое будет отображаться.

Что я пытаюсь сделать: когда я снова нажимаю на поле, оно должно скрыть поле (отображение: нет)

Я пробовал с функцией переключения, но почему-то это не похоже на работу. Какая у меня альтернатива?

Answer 1

Попробуйте это ниже:

jQuery(function ($) {
  $(".box").click(function() {
    $(".box").removeClass("active");
    $(this).addClass("active");
     if($(".boxContent").hasClass("show-content")){  
    $(".boxContent").removeClass("show-content");
     }else{
    var target = $(this).attr("target");
    $(".boxContent_" + target).addClass("show-content");
  };
  });
});

Answer 2

Как насчет этого?

jQuery(function ($) {
  $(".box").click(function() {
    var currentActive = $(this).hasClass("active");
    $(".boxContent").removeClass("show-content");
    $(".box").removeClass("active");
    if (!currentActive){
      $(this).addClass("active");
      var target = $(this).attr("target");
      $(".boxContent_" + target).addClass("show-content");
    }
  });
});