• 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.
READ ALSO  How to Split Div into 2 Columns | Step by Step Guide

Leave a Reply