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 >

  <div >
    <div >
      <div >
        LOGO
      </div>
      <div >
        MENU
      </div>
      <div >
        <div >
          Click me
        </div>
      </div>
    </div>
  </div>

  <div >
    SEARCH FORM HERE
  </div>

</div>

CodePudding user response：

I just had a play around and got it working:

https://codepen.io/ryanowalls/pen/bGozVpy

I think the main reason it looks like it isn't sliding back up is because the purple background colour is only set on your 'active' class. This means the search bar is turning white before it can be seen animating away.

CSS updates:

.header__searchBar {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  width: 100%;
  height: 100%;
  color: white;
  background-color: #5F249F;
}

JavaScript updates:

$(function() {
  function toggleSearch(){
    var element = $(".header__searchBar");
    // check if search bar is open already
    var active = element.hasClass("active");
    
    if(active) {
      // close search bar
      gsap.to(element, {'transform': 'translateY(-100%)'});
    } else {
      // open search bar
      gsap.to(element, {'transform': 'translateY(0%)'});
    }

    $(".header__searchBar").toggleClass("active");
  }

  $(".header__searchIcon").click(function() {
    toggleSearch();
  });
});