使用jQuery打开和关闭div时遇到问题

.box-one {
  border: 0.1em solid #ccc;
 }

.dropdown-info {
  display: none;
}

<div class="box-one">
  <div class="header">
    <h3 class="text-center">Sample Header</h3>
   </div>
  <div class="dropdown-info">
    <p class="text-center">Sample Text</p>
  </div>
</div>
  

我正在尝试打开和关闭一个div，如果单击了另一个div，并且我尝试同时使用.toggle（）和.click（），但是它不起作用。我想征询其他人的意见。我将展示如何尝试使用两种方法来完成它

$(document).ready(function() {

    var descriptionOpen = false;

    if (descriptionOpen === false) {
        $('.header').click(function() {
            $('.dropdown-info').show();
            descriptionOpen === true;
        });
    };
    else if (descriptionOpen === true) {
        $('.header').click(function() {
            $('.dropdown-info').hide();
            descriptionOpen === false;
        });
    };
});


$(document).ready(function() {

    $('.header').toggle(function() {
        ('.dropdown-info').show();
    }, function() {
        ('.dropdown-info').hide();
    });
});