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?
is jQuery not dead in 2024?
ReplyDeleteSo.... Let's say that I have a list of something on a page. I show a headline then have a link that says "more" after each headline to hide/show the details of the headline. So it looks something like this...
ReplyDelete<a id="MoreDetailsLink1">More...</a>
<div id="MoreDetailsDiv1">The rest of story goes here</div>
And let's say that there may be 25 or 100 incrementally. I don't want to write a jquery function for every single more/details combination. So, how do I pass the id of an element that is clicked on to toggle the correct corresponding element. When I click on the MoreDetailsLink72, I want MoreDetailsDiv72 to toggle.
you can achieve this functionality by using a common class for your "More..." links and a data attribute to store the corresponding ID of the div you want to toggle. This way, you can write a single jQuery function that handles all the links and toggles the correct div based on the data attribute.
ReplyDeleteHere's how you can do it:
Add a common class to all your "More..." links.
Use a data attribute to store the ID of the corresponding div.
here is an example:
<a class="MoreDetailsLink" data-target="MoreDetailsDiv1">More...</a>
<div id="MoreDetailsDiv1">The rest of story goes here</div>
<a class="MoreDetailsLink" data-target="MoreDetailsDiv2">More...</a>
<div id="MoreDetailsDiv2">The rest of story goes here</div>
<!-- Repeat as necessary -->
you also need to write a single jQuery function to handle the click event for all the links:
$(document).ready(function() {
$('.MoreDetailsLink').on('click', function(e) {
e.preventDefault(); // Prevent the default action of the link
var targetDivId = $(this).data('target'); // Get the target div ID from the data attribute
$('#' + targetDivId).toggle(); // Toggle the visibility of the target div
});
});
This script will attach a click event listener to all elements with the class MoreDetailsLink. When any of these links are clicked, it will read the data-target attribute to find out which div should be toggled, and then toggle the visibility of that div.