Show/Hide Div on Button Click using JavaScript

In this code snippet will show or hide div on Button onClick event using JavaScript function.

Show/Hide Din on Button Click using JavaScript

HTML and JavaScript:

<!--Show/Hide Div on Button Click using JavaScript.-->
<html>
   <head>
      <title>Show/Hide Div on Button Click using JavaScript.</title>
      <script type="text/javascript">
         function showHideDiv(ele) {
         	var srcElement = document.getElementById(ele);
         	if (srcElement != null) {
         		if (srcElement.style.display == "block") {
         			srcElement.style.display = 'none';
         		}
         		else {
         			srcElement.style.display = 'block';
         		}
         		return false;
         	}
         }
      </script>
   </head>
   <body>
      <center>
         <h1>Show/Hide Div on Button Click using JavaScript.</h1>
         <input type="button" value="Show/Hide" onClick="showHideDiv('divMsg')"/><br><br>
         <div id="divMsg" style="background-color: #006969; color: #ffffff; height: 200px; width: 200px; text-align: center; display:none">
            <b>Hello friends, <br>How are you?</b>
         </div>
      </center>
   </body>
</html>

Result:

Click for DEMO →

JavaScript Examples »

JavaScript function to add two integer numbers

Display different Alert Message on different Button Click Event using JavaScript

Related Examples

Comments and Discussions!

Load comments ↻