隐藏事件

Question

我尝试隐藏可见部分，然后使用JQuery .hide()和.show()显示隐藏部分。当事件触发时（点击图像时）它只会暂时隐藏可见部分，然后再次可见，之前隐藏的部分现在可见于第一个可见部分下方。根据我阅读的文档和一些教程，我已经注意到这不应该发生。

HTML：

<div class="transition-div">
<section class="project-section">
  <div class="project-wrapper" id="project-one">
    <div class="desc-text">
      <h2>Header</h2>

    </div>
    <div class="project-image-wrapper">
      <img class="project-image" id="project-img-one" src="images/img1.png">
      <button class="project-button">Button
    </button>
  </div>
  </div>
</section>

<section class="project-section hidden">
  <div class="project-wrapper">
    <div class="desc-text">
      <h2>Header</h2>

        <p>Some description text</p>

    </div>
    <div class="project-image-wrapper">
      <img class="project-image" src="images/img1.png">
  </div>
  </div>
</section>
</div>

JS：

$('.hidden').hide();

var slideSection = function() {

$('.project-image-wrapper').click(function() {

  var $parentDiv = $(this).parents('.transition-div');
  var $childToShow = $parentDiv.find('.hidden');
  var $childToHide = $childToShow.siblings('.project-section');

  $childToHide.hide(300, hideActiveSection());

  function hideActiveSection() {
    $childToHide.addClass('hidden');
    $childToShow.show(300, function() {
      $(this).removeClass('hidden');
    });
  }

  });

};

slideSection();

如果我单击当前可见的项目图像以显示它，我将如何持久保存我要隐藏的部分？我的CSS可能会干扰我想要做的事吗？如果是这样，我将发布代码。谢谢！