So, you have a div element and you want to show or hide them may be on a click or during page load, how do you do that in jQuery? Well, jQuery provides convenient show() and hide() methods which can show or hide an element, including div. All you need to do is, write a jQuery selector to find the div you want to show or hide and then call jQuery function show() or hide() depending upon your requirement. You can also use the toggle() function to switch between showing and hiding. This method will make element visible if its hidden and vice-versa. To select the div you can use either element, id or class selector but I recommend to use the ID selector because it will work even if you have multiple div in your page.
In the past, I have shared few tutorials about checkbox and jQuery how to check/uncheck checkbox or how to find all unchecked checkboxes using jQuery and
today I will share jQuery functions you can use to show and hide an element in an HTML page. For all the ways we will use jQuery because its
simple, fast, and very readable.
Let's see the example now.
jQuery example to show and hide a div without reloading page
I know that even though concept is small, a working example is necessary because that also give context. In this example, we have a div which holds nothing but a paragraph, a text element. I have three buttons to demonstrate show(), hide() and toggle() functionality.
All the buttons has similar code. We have given them a click handler and there we are first selecting the div by using ID selector i.e. $(#main") where main is the id of div and then we are calling show(), hide() and toggle() function from jQuery.
<html>
<head>
<title>How to show or hide div using jQuery</title>
</head>
<body>
<h2>jQuery example to show or hide div without reloading page</h2>
<div id="main">
<p> This is the div element </p>
</div>
<button id="showBtn">show</button>
<button id="hideBtn">hide</button>
<button id="toggleBtn">toggle</button>
<script src="//code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function(){
// toggle the div
$("#showBtn").click(function(){
$("#main").show();
});
// show the div
$("#hideBtn").click(function(){
$("#main").hide();
});
// hide the div
$("#toggleBtn").click(function(){
$("#main").toggle();
});
});
</script>
</body>
</html>You can now copy this code and paste it on a site like jsfiddle.net or you can just save it as .html and open on a browser like Chrome or Edge.
Here is how it will look when you open this page on a browser:
You can see the "This is the div element" on red background, that is our div element which we will show and hide using three buttons we have created. By default tit will show but when you click on hide() then it will disappear as shown below:
You can make it appear again by either clicking show() or toggle() button as shown below:
toggle() can be used to both show and hide the elements. For example, when the element is showing and you press toggle() then it will hide the element and vice-versa.
That's all about how to show, hide or toggle a div using jQuery. Even though show and hide method uses display CSS property to make an element visible or hidden e.g. display:none, its really cool to use the show() and hide() function from jQuery library instead of doing it by yourself. I have been using jQuery for more than 15 years now and I really love it for its simplicity and powerful function like this.
Other jQuery tutorials and articles you may like
Do you know any other way to show and hide a div in jQuery or just plain JavaScript?
- How to get the current URL, Parameters, and Hash using jQuery? (solution)
- 3 Ways to check if a checkbox is selected in jQuery? (solutionsolution)
- How to modify multiple elements in one go? (jquery tutorial)
- How to find all unchecked checkbox in jQuery? (tutorial)
- jQuery Hello World Example (program)
- How to enable/disable form elements in jQuery? (tutorial)
- How to use more than one jQuery UI DatePicker on the JSP page? (example)
- How to check/uncheck checkboxes in jQuery? (tutorial)
- How to create tab-based UI using jQuery? (example)
- How to redirect a page URL using jQuery and JavaScript? (solution)
- How to find all checked checkboxes in jQuery? (example)
- 20 jQuery Interview Questions for Java Web Developers (list)
- How to load jQuery on a web page? (solution)
- How to use multiple jQuery UI Date Picker in a page? (tutorial)
- How to solve jQuery - uncaught reference error $ is not defined error? (solution)
Do you know any other way to show and hide a div in jQuery or just plain JavaScript?
1 comment :
is jQuery not dead in 2024?
Post a Comment