How can i get this Jquery slide to work?

Question

How can I get my jQuery slide to work?

https://codepen.io/kasiraket/pen/KmKYmL

$(document).ready(function() {
    $('#search-icon').click(function() {
        $(".search-container").slideToggle("400", function(){
            $(".search-container input").toggleClass("show");
        });
    });
});

Answer 1

Your slideToggle() and toggleClass() are firing opposite eachother. When your container is shown, the inputs are hidden - and when the inputs are shown, the container is hidden.

Just add a display: none; to the search-container initially, so that both the container and inputs are in the same state.

.search-container {
   display: none;
   /*...the rest of your CSS*/
}

Here is your fixed example: https://codepen.io/anon/pen/WjbwPo

---

EDIT: Please review Daniel H's answer - he makes a good point. Simply adding the display: none; will cause issues with the first click. Consider instead moving the display: none; from search-container input to search-container .

---

You may be wondering what I mean, considering the container is clearly not on the page when it loads; it's important to realize that the only reason it isn't showing is because all of its contents (the inputs) are hidden. If you right click on the page and go to Inspect Element, you can very clearly see that when you click the search icon, display: none; is getting added to search-container at the same time show is getting added to the inputs.

Answer 2

I think you need to move display: none; from search-container input to search-container , no need to hide the child element, just hide the container.

codepen: https://codepen.io/hdl881127/pen/EmaKeL

$(document).ready(function() {
  $('#search-icon').click(function() {
    $(".search-container").slideToggle("400");
  });
});