ADVERTISEMENT
ADVERTISEMENT

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:

show hide div on button click

JavaScript Examples »


ADVERTISEMENT




ADVERTISEMENT



Comments and Discussions!

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.