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.

  1. <script language=javascript type=‘text/javascript’>
  2. function divHideShow(divid) {
  3. var div_state = document.getElementById(divid).style.display;
  4. if (div_state == ‘block’) {
  5. document.getElementById(divid).style.display = ‘none’;
  6. } else {
  7. document.getElementById(divid).style.display = ‘block’;
  8. }
  9. }}
  10. </script>

Now call above method in your file.

  1. <html>
  2. <body>
  3. <button onclick=“javascript:divHideShow(‘targetDiv’)”>Hide Show Div</button>
  4. <div id=‘divid’>Javascript Hide Show Example</div>
  5. </body>
  6. </html>