Show and hide div using JavaScript | onclick show/hide div
In this tutorial learn how to show and hide div using JavaScript. Use the toggle() jQuery method to show or hide div element onclilck function. As you click on the Hide or show DIV button a div element appear or disappear according onclick show/hide div jQuery.
To Create a hide() or show() method it takes following steps: –
- Create a click event or button to call hide() or show() method.
- Write a JavaScript function for hide() or show() method.
- One-line CSS have to write for display none.
HTML
<a href="#!" class="hide-btn">Hide Div</a> | <a href="#!" class="show-btn">Show Div</a>
<div class="box">
This is hide by default, when press on the Show Div this div will be display.
</div>CSS / JavaScript
.box {
display: none;
}
<script>
$(document).ready(function(){
$(".hide-btn").click(function(){
$(".box").hide();
});
$(".show-btn").click(function(){
$(".box").show();
});
});
</script>Example
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="bootstrap.min.css">
<title>Hello, world!</title>
<style>
.box {
display: none;
}
</style>
</head>
<body>
<a href="#!" class="hide-btn">Hide Div</a> | <a href="#!" class="show-btn">Show Div</a>
<div class="box">
This is hide by default, when press on the Show Div this div will be display.
<div'>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="jquery-3.3.1.slim.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".hide-btn").click(function(){
$(".box").hide();
});
$(".show-btn").click(function(){
$(".box").show();
});
});
</script>
</body>
</html>In this tutorial we learn that how to show and hide div on click.
Another Option for hide and show method using toggle(); method
HTML
<a href="#!" class="toggle-btn">Hide Div / Show Div</a>CSS
.box {
display: none;
}JavaScript
<script type="text/javascript">
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$(".box").toggle();
});
});
</script>Hide and show div using JavaScript.
You can optionally specify the duration (also referred as speed) parameter for making the jQuery show hide effect animated over a specified period of time. Durations can be specified either using one of the predefined string ‘slow’ or ‘fast’, or in a number of milliseconds, for greater precision; higher values indicate slower animations.
.hide(‘slow’); OR .hide(‘200’);
.show(‘fast’); OR .show(‘2000’);
Play any video in popup.
Learn to use CSS and JavaScript to show and hide Div. use hide() or show() method for hide div or show div. The hide() method hides the selected elements, and the show() method shows the selected elements. Show and hide div using JavaScript.
You can customize this code further as per your requirement.