One of the features that are present in jQuery is the ability to show and hide elements, divs, and paragraphs when needed and also hide them without interfering with other properties in a webpage.
In the other languages we use while developing web pages mostly html, CSS and bootstrap when we want to hide a particular element, we deploy a CSS style where we set display to none or use hidden to ensure that it is not visible. The hide using CSS and html element is as shown below
- how to hide an element using CSS
// In line CSS
<div style="display:none"> div element to hide </div>
// Inside CSS style
<style>
.div1{
display:none;
}
</style>
<div class="div1"> div element to hide </div>
- how to hide an element using html
This is mostly applicable in form inputs where you want to submit a value which is already predefined and you don’t want it to be visible to users
We use the hidden value in the type attribute as shown below
<input type="hidden" value="1" class="form-control" name="customerid">
What is JQuery
In a previous article in which we showed you how to submit data using jQuery we discussed and highlighted that jQuery is a JavaScript library that is designed to make javascript work easier on a website due to the fact that it has rich features.
The rich features that jQuery offers are highlighted below;
- jQuery is lightweight meaning that it processes information fast
- jQuery works in the background that is, it only displays results to the user once the processing is done
- jQuery allows an update of pages with real-time data without reloading or refreshing pages
In this article, we shall discuss how you can use hide and show methods that are provided by jQuery and show examples of how each method is used.
The good thing with jQuery hide and show methods is that it allows one to define even the interval of how you want an element to be displayed or hidden when the method is called
How to initialize jQuery
To start using jQuery in your web page, you must ensure that you have initialized it so that its features are available to work with
The official website for jQuery where you can download jQuery scripts is https://jquery.com/download/
In your web page before using jQuery hide and show methods, add this script which will initialize jQuery in your web page. You can always check for newer versions of jQuery scripts from the link provided above
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
JQuery Show method
jQuery show method overwrites all existing styles or attributes that are defined to hide an element. Once the jQuery show method is called by either using a click function or any other function, the element is displayed despite having hidden styles
The following is the syntax for show method in jQuery
$("element_to_show").show();
An example working with show method is as follows
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$(".div1").show();
});
</script>
</head>
<body>
<div class="div1" style="display:none">a hidden element.</div>
</body>
</html>
From the example given above, the hidden element div has a style of display none but once the jQuery method is defined, the display none style is overwritten
You can also decide to show the hidden element when a button is clicked as shown below
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$(".show").click(function(){
$(".div1").show();
});
});
</script>
</head>
<body>
<div class="div1" style="display:none">a hidden element.</div>
<button class="show">click to show</button>
</body>
</html>
jQuery Hide Method
By default, all elements in a web page are usually visible meaning unless a style or a hidden method is used, they remain visible
To hide elements in jQuery, we use the hide method which has the following syntax
$("element_to_hide").hide();
An example of hiding elements using jQuery is as shown below
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$(".div1").hide();
});
</script>
</head>
<body>
<div class="div1">a hidden element.</div>
</body>
</html>
Once the page is loaded, the div with hidden element will be hidden by default
To hide an element when a button is clicked, you can use the code shown below
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$(".hide").click(function(){
$(".div1").hide();
});
});
</script>
</head>
<body>
<div class="div1">an element to hide. </div>
<button class="hide">click to hide</button>
</body>
</html>
Conclusion
With the above discussion, you can comfortably use the hide and show methods using jQuery with ease. The most important thing to remember when using jQuery is the position of the jQuery script. It should be above the jQuery methods, that is, it should be initialized before defining any jQuery method
That’s it for this article, follow us for more articles on jQuery.
