In this article I will explain with an example, how to Toggle i.e. show and hide HTML DIV on Button Click using JavaScript and jQuery.
When the Button is clicked, the HTML DIV will be shown and when again the same Button is clicked the HTML DIV will be hidden.
Toggle (Show Hide) DIV on Button Click using JavaScript
The HTML Markup consists of a HTML Button and an HTML DIV consisting of a TextBox.
The Button has been assigned a JavaScript OnClick event handler.
When the Buttons is clicked, the ShowHideDiv JavaScript function is executed inside which based on value of the Button i.e. Yes or No, the HTML DIV will be toggled i.e. shown or hidden respectively using JavaScript.
<script type="text/javascript">
function ShowHideDiv(btnPassport) {
var dvPassport = document.getElementById("dvPassport");
if (btnPassport.value == "Yes") {
dvPassport.style.display = "block";
btnPassport.value = "No";
} else {
dvPassport.style.display = "none";
btnPassport.value = "Yes";
}
}
</script>
<span>Do you have Passport?</span>
<input id="btnPassport" type="button" value="Yes" onclick="ShowHideDiv(this)" />
<hr />
<div id="dvPassport" style="display: none">
Passport Number:
<input type="text" id="txtPassportNumber" />
</div>
Toggle (Show Hide) DIV on Button Click using jQuery
The HTML Markup consists of a HTML Button and an HTML DIV consisting of a TextBox.
The Button has been assigned a jQuery Click event handler.
When the Buttons is clicked, based on value of the Button i.e. Yes or No, the HTML DIV will be toggled i.e. shown or hidden respectively using jQuery.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnPassport").click(function () {
if ($(this).val() == "Yes") {
$("#dvPassport").show();
$(this).val("No");
} else {
$("#dvPassport").hide();
$(this).val("Yes");
}
});
});
</script>
<span>Do you have Passport?</span>
<input id="btnPassport" type="button" value="Yes" name="btnPassport" />
<hr />
<div id="dvPassport" style="display: none">
Passport Number:
<input type="text" id="txtPassportNumber" />
</div>
Screenshot
![Toggle (Show Hide) DIV on Button Click using JavaScript and jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
