Basic effects in jQuery include hiding and showing elements, which are achieved using the show(), hide(), and methods toggle().
So, for example, we can hide and show elements on a button click:
<ul>
<li>Java</li>
<li>C/C++</li>
<li>JavaScript</li>
</ul>
<button id="show">Show</button>
<button id="hide">Hide</button>
<script type="text/javascript">
$(function() {
$('button#show').click(function(){
$('ul').show();
});
$('button#hide').click(function(){
$('ul').hide();
});
});
</script>
Thus, when you click on the “Show” button, the method will work $(‘ul’).show(), and when you click on the “Hide” button, the list will be hidden using the method $(‘ul’).hide().
We could achieve the same effect by using the method in both cases toggle, which simply toggles visibility:
$(function() {
$('button').click(function(){
$('ul').toggle();
});
});
Now let’s look at these methods in more detail.
hide method
The hide method sets the element’s style property display to none, thereby making the element hidden. We could do the same with the following expression: css(‘display’, ‘none’). The hide method can take the following forms:
- hide(): method without parameters
- hide([duration][, complete]): takes two optional parameters. The parameter durations specifies how long the animation of the element will last. Its default value is 400 milliseconds.
The parameter complete represents the function that the method will call when the animation completes.
hide([duration] [, easing][, complete]): the same, but the parameter is added easing, which takes the name of the animation smoothness function as a string. Its default value is “swing”.
For example, we can use slow ( hide(‘slow’)) or fast animations ( hide(‘fast’)), which are 600 and 200 milliseconds respectively.
For example:
$('button#hide').click(function(){
$('ul').hide('slow', function(){
alert('Element hidden');
});
});
show method
The show method displays the element by setting the value of the property display to what it was before it was hidden. For example, if an element had a style defined before hiding it display: inline, then after displaying it will have the value inline. If the style has not been explicitly defined, then it will have the value display: block.
The show method has the same forms as the hide method:
show()
- show([duration][, complete])
- show([duration] [, easing][, complete])
Let’s say we have a block of paragraphs on a page. We only see one at a time. And we want to use the buttons to switch paragraphs (that is, actually change their visibility):
<html>
<head>
<metacharset='utf-8'>
<script src="jquery-3.6.1.min.js"></script>
<style>
#langs p {display:none;}
#langs p.first {display:block;}
</style>
</head>
<body>
<h3>Selected language</h3>
<div id="langs">
<p class='first'>Java</p>
<p>C/C++</p>
<p>PHP</p>
<p class='last'>JavaScript</p>
</div>
<button id="prev">Back</button>
<button id="next">Next</button>
<script type="text/javascript">
$(function() {
var current = $("div#langs p").first();
$('#next').click(function(){
$(current).not('.last').hide("fast", function() {
current = $(current).next('p');
$(current).show("fast");
});
});
$('#prev').click(function(){
$(current).not('.first').hide("fast", function() {
current = $(current).prev('p');
$(current).show("fast");
});
});
});
</script>
</body>
</html>
First, we set the styles so that only one block is visible at first.
Using the expression, var current = $(“div#langs p”).first();we get the currently viewed block. When the page loads, this will be the very first block or block with the class first.
And then, using selectors and filters, we switch visibility through the show and hide methods and set the new currently viewed block.
toggle method
The toggle method combines the functionality of the hide and show methods and, if the element is displayed on the page, it is given the style display: none. And if the element is hidden and has the value display: none, then it is displayed (the property display gets the value that it had before hiding. If the property was not explicitly defined, then it will have the value display: block).
The toggle method has the same forms as the hide method:
toggle()
- toggle([duration][, complete])
- toggle([duration] [, easing][, complete])