Slide in and out effect using GSAP

I have a header section which contains a search icon. When this icon is clicked, I want my search bar to slide in from the top. When it’s closed, I want it to slide back up.

Currently:

  1. My search bar slides down on initial click, but when clicking “click me again”, it doesn’t slide back up.
  2. Once you’ve clicked the icon twice, on the third instance, when trying to slide the menu in (which works on first click), it doesn’t slide in, just appears

Demo:

$(function() {

  function slideDown(){
    var element = $(".header__searchBar");
    var tl = new TimelineLite();

    tl.to(element, 1, {
      top: 0,
      autoAlpha: 1
    });

/*     tl.from(element, 1, {
      top: "-100%",
      autoAlpha: 1
    }); */

  }

  $(".header__searchIcon").click(function() {
    $(".header__searchBar").toggleClass("active");
    slideDown();

  });


});
.header {
  position: relative;
  padding: 20px 0;
}
.header__searchIcon {
  position: relative;
  z-index: 99;
  cursor: pointer;
}
.header__searchBar {
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  color: white;
}
.header__searchBar.active {
  z-index: 10;
  background-color: #5F249F;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="header">

  <div class="container">
    <div class="row">
      <div class="col-2">
        LOGO
      </div>
      <div class="col-8">
        MENU
      </div>
      <div class="col-2">
        <div class="header__searchIcon">
          Click me
        </div>
      </div>
    </div>
  </div>

  <div class="header__searchBar">
    SEARCH FORM HERE
  </div>

</div>