Show and hide divs with pure CSS

Here’s a great simple way to hide and show divs using pure CSS, no jquery or javascript.

show-hide-div

 

 

 

First, let’s add the HTML:

We’re just creating two text spans for the controls, and a paragraph which can be shown or hidden.

We create a CSS rule for hiding the content, and another for showing it. display: none, shows well none. display-block shows as normal. I’ve created the box-outline class which just adds a border and some padding.

Super simple and no jquery or javascript needed!

Here’s a jsfiddle link you can fork and work on right away.

 

Questions