Little Show/Hide DIV On Toggle Button Using HTML-CSS Only

Are you trying to find a way to hide and show your content? The demo below shows a simple yet elegant way of toggling your content and toggling the control text via HTML-CSS and styling. There are a couple of non-JavaScript tricks at our disposal for hiding and showing content based on CSS. To be more precise, it is the use of inline java script also which can change text of the button for an element in a specific state.

Here is a light show/hide DIV code that can be used to hide parts of your blog content. You can use it in posts, pages, widgets, or wherever you see fit. This snippet have some extra features such as Button text changes according to the state of the DIV – “Show” in hide state and “Hide” in show state. It can Animate the system of expanding and collapsing actions, achieved using CSS3 Transitions. The animation won’t work in Internet Explorer though. Allows for multiple DIV in one page without having to assign unique IDs to them.

Features:

1.) No JQuery File Added.
2.) No JavaScript Code/File Added.
3.) HTML-CSS Added.
4.) Simple And Fast Loading Library.
5.) Can Work With Any Browser.

How To Add In A WebPage OR Blog?

1.) Just Go To Your “Web Page File” or “Blog”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.

CSS:

<style type="text/css">
.spoilerbutton {display:block;margin:5px 0;}
.spoiler {overflow:hidden;background: #f5f5f5;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value="Show"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Hide"] + .spoiler {padding:5px;}
</style>

HTML:

<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler">
<div>
PUT CONTENT YOU WISH TO HIDE HERE
</div>
</div>

Customization:

1.) You can replace “Show” and “Hide” text with your own.
2.) For multiple usage, all you need to do is copy paste the HTML part. Add as many as you want, they will work independently of each other.
3.) You can change animation speed by changing the duration (in seconds) in CSS.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…