Hide and Show a Div Using Javascript
Sep 16, 2013, by admin
Hi all here we going to see how to create a hidden Div and display it with the click of a button. Actually there is a many reasons you may want to hide a Div in a website design. Sometimes you may want to create a drop down type menu or a box that will show more information when you click a link.
Here I have created a javascript function named as divHideShow that will be called on button click event to hide and show div content.
Below is javascript method to hide and show div.
- <script language=javascript type=‘text/javascript’>
- function divHideShow(divid) {
- var div_state = document.getElementById(divid).style.display;
- if (div_state == ‘block’) {
- document.getElementById(divid).style.display = ‘none’;
- } else {
- document.getElementById(divid).style.display = ‘block’;
- }
- }}
- </script>
Now call above method in your file.
- <html>
- <body>
- <button onclick=“javascript:divHideShow(‘targetDiv’)”>Hide Show Div</button>
- <div id=‘divid’>Javascript Hide Show Example</div>
- </body>
- </html>
