On Click icon show div, then click again hide Div

Question

I have a navbar with a search icon. When I click it I want it to show a div where I have an input and a button, and if I click that same icon again, I want to hide the same div. So far when I click on it, it shows the div, however when I click on it again, it doesn't close it.

<form class="form-inline my-2 my-lg-0">
    <i id="searchIcon" class="fas fa-search fa-2x">&nbsp;&nbsp;</i>
    <div  style="display:none" class="input-group date" id="searchDate" data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" id="datetimepicker6" data-toggle="datetimepicker" data-target="#datetimepicker6"/>&nbsp;&nbsp;
        <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
    </div>
    <a style="color: black" href="logout.php"><i class="fas fa-sign-out-alt fa-2x"></i></a>
</form>

And my javascript:

    $('#searchIcon').click(function(){
        console.log("searcg clicked");
        this.click?$('#searchDate').show(1000):$('#searchDate').hide(1000);
    }); 

Does anyone know why it doesnt close?

Answer 1

jQuery comes with the toggle method:

 $('#searchIcon').click(function() { $("#searchDate").toggle("slow"); }); 

 @import url("https://use.fontawesome.com/releases/v5.3.1/css/all.css"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="form-inline my-2 my-lg-0"> <i id="searchIcon" class="fas fa-search fa-2x">&nbsp;&nbsp;</i> <div style="display:none" class="input-group date" id="searchDate" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" id="datetimepicker6" data-toggle="datetimepicker" data-target="#datetimepicker6" />&nbsp;&nbsp; <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button> </div> <a style="color: black" href="logout.php"><i class="fas fa-sign-out-alt fa-2x"></i></a> </form> 

Answer 2

I did something similar to this and I think I can Help!

 function Test1() { var x = document.getElementById("searchDate"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } 

 <i id="searchIcon" class="fas fa-search fa-2x" onclick="Test1()"> 

Answer 3

Try it:

$('#searchIcon').click(function(){
    $('#searchDate').animate({
         hide: 'toggle'
    }, 1000);
}