CODEWITHSUNDEEP
jqueryhtmlshow
Tim
Tim

Reputation: 11

Show a div only when a button clicked

How can I show a div on a button click, and hide it otherwise?

I have already the button for show:

<script>
 $("#show").click(function(){
        $("#content").show();
    });
});
</script>

<div class="content">Content of div</p>

<button id="show">show</button>

Upvotes: 1

Views: 5933

Answers (2)

Uma Kanth
Uma Kanth

Reputation: 5629

I suggest you to use a toogle() instead of show() and hide().

And also to put your code in the ready().

If you don't want to show it from the start, use the display : none or visibility: hidden; property.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").toggle();
    });
});
</script>
</head>
<body>

<div style = "display: none;">This is a div.</div>

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

</body>
</html>

Upvotes: 3

Shasha
Shasha

Reputation: 669

You can add visibility property for a div like visibility : "hidden"

Upvotes: 0

Related Questions