Show/Hide DIV Using JavaScript Toggle Button

There are many JavaScript Toggle Button codes snippets are avilable over internet that is providind this feature to show a DIV if its hidden or same code will hide the DIV if its displaying but we have a little JavaScript Toggle Button code that will do the same as described above.

This JavaScript Toggle Button will show and hide your hidden or block DIV on click on any button, text or image and works perfectly. This JavaScript Toggle Button is cross browser and will work in any environment. Now garb the little JavaScript Toggle Button from below and use it anywhere.

Features:

1.) No JQuery File Added.
2.) Pure JavaScript Codes.
3.) No CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

JavaScript:

<script type="text/javascript">
// Open DIV OnClick And Hide On Again Click
//<![CDATA[
function show_hide_DIV_data()
{
var div=document.getElementById('DIV_data');
div.style.display = (div.style.display == "none") ? "block" : "none";
}
//]]>
</script>

HTML:

<button onclick="show_hide_DIV_data()">Open/Close</button>
<div id="DIV_data" style="display:none;">
Hello, This Is The Hidden DIV
</div>

Customization:

1.) JavaScript Is Ok For General Us. You Can Add More HTML,CSS. If You Are Pro, Then You Can Do Any Thing.

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…