how to show and hide the div on button click using jquery

Question

In my application i have a html button where i need to hide few elements which are in div on button click and show the same elements on again click the same button i am able to hide the div but how can i again show the div elements.Belo is my html and jquery code

Html

<button type="button" id="btnsearch" style="background-color: white">Search</button>
<div id="Show"></div>

JQuery

$("#btnsearch").click(function () {
        $("#Show").hide();
    });

score 0 · Answer 1 · answered Jan 16 '19 at 11:12

0

Use .toggle() in jquery

$("#btnsearch").click(function () {
        $("#Show").toggle();
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="btnsearch" style="background-color: white">Search</button>
<div id="Show">ff</div>

answered Jan 16 '19 at 11:12

ellipsis

12,049
2
17
33

1

Please do not answer duplicates, rather mark them as such. – Alexandre Elshobokshy Jan 16 '19 at 11:13

Ayaz Ali Shah · Answer 2 · 2019-01-16T11:13:18.967

0

You can use jquery toggle() function for the task

 $("#btnsearch").click(function(){
    $("#Show").toggle();
  });

By using jquery toggle() function will automatically hide and show the targeted element #Show

edited Jan 16 '19 at 11:13

answered Jan 16 '19 at 11:12

Ayaz Ali Shah

3,453
9
36
68

score 0 · Accepted Answer · answered Jan 16 '19 at 11:15

Try this

$(document).ready(function(){
  $("button").click(function(){
    $("#toggle").toggle();
  });
});

div {
height:200px;
width:200px;
background-color:red;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>

<div id="toggle">
</div>

<button>Toggle between hide() and show()</button>

</body>
</html>

how to show and hide the div on button click using jquery

3 Answers3