CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2989367
user2989367

Reputation: 435

On Click icon show div, then click again hide Div

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?

Upvotes: 0

Views: 4396

Answers (3)

MichaelvE
MichaelvE

Reputation: 2578

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>

Upvotes: 4

Do Trung Duc
Do Trung Duc

Reputation: 406

Try it:

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

Upvotes: 0

MtnBros
MtnBros

Reputation: 55

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()">

Upvotes: 0

Related Questions