Home »
JavaScript Examples
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:
JavaScript Examples »