• Post category:CSS

How to show/hide Div Onclick | Advanced Guide

CSS show/hide div on click

This article is about how to show/hide a div on click in CSS. To show a div element you need to create a div using the HTML <div> tag and put some text inside it. If you want to hide the div then give the CSS style “display:none” to the div element. We can also hide the div element using Javascript. Let’s see, how to do that with a code example:

<html>
<head>
<style type="text/css">
#content {
display: none;
background-color: green;
margin: 10px;
}
input[type="button"]{
width: 150px;
cursor: pointer;
}
input:focus + div#content {
display: block;
}
</style>
</head>
<body>
<input type="button" value="CLICK TO SHOW">
<div id="content">
Showing DIV
</div>
</body>
</html>
  1. In the above code, first, create an Input button and div with ID “content” in HTML.
  2. We have given the style “display: none” to hide the div tag and set the green background color inside the style tag in HTML.
  3. We have given cursor:pointer style to the input button to change the cursor and set the width.
  4. As in the above code, we need to write the style display: block for the selector “input:focus + div#content”.
  5. Run your code, Normally the div is not displayed, the div is displayed only after the button is clicked. Then after you click the div the div will hide.

Leave a Reply