Updated March 23, 2023
Introduction to jQuery toggle()
The toggle() method of jQuery is used to toggle an element’s visibility in the DOM. This is a very straightforward method. If the element is hidden and the toggle method is called on that element, the element is displayed. If the element is not hidden when the toggle method is called, the element gets hidden.
Syntax:
The toggle method’s syntax has many variants based on the number of optional parameters passed to this method.
The basic and the most elementary syntax is as follows:
$(<element>).toggle();The advanced syntax expects some parameters as follows:
$(<element>).toggle([duration], [complete]);Here duration is the time in milliseconds for the animation effect. If this argument is not supplied, the element’s visibility is toggled instantaneously. The complete is a callback function which is called once the toggle animation is complete. A very important point to note here is that the callback function is called once for each element. This is further illustrated in the implementation section of the course.
Then there is another syntax that expects a boolean value. This was introduced in jQuery v1.3.
$(<element>).toggle(display);If the display parameter is true, the element is displayed. When false, the element is hidden.
The jQuery v1.4.3 introduced another variation of the toggle method. It expected another string-typed parameter that would define the type of transition during the animation.
$(<element>).toggle([duration], [easing], [complete]);Behind the Scenes
- So, how does the toggle method achieve its goal? Simple answer, it plays with the CSS display property of the element. If the element is shown, its display property will be changed to none. If it is hidden, the display property will be restored back to the original. The initial display property of the element is stored. The default display property is inline if there is no original display property of the element.
- The advanced methods of jQuery, a.k.a. jQuery toggle animation method, expect a duration or a transition style or a callback function. In such a case, the toggle method changes the height, width, and opacity of the element simultaneously during the animation’s whole duration. When the duration limit is reached, the display style property is set to the appropriate value.
Examples
Let us look at some of the examples of the toggle method.
- It looks like this in Chrome:
- This is the playground for most of the jQuery related concepts. We would be using this playground throughout this article.
- Now, fire up your browser and go to any websites which are built upon jQuery. I would visit the website of jQuery itself (https://jquery.com/). Open the developer console.
- Next, we identify the element we would like to toggle. Let’s toggle the jQuery logo.
- From the Elements tab in the developer window, you would see that the element is this:
<h2 class="logo"><a href="/" title="jQuery">jQuery</a></h2>
- This element is uniquely defined through a class logo. We would use this class as a selector.
- Next, go to the console tab and type the following command:
$('.logo').toggle()- As you press enter, notice that the jQuery logo disappears from the page.
- Next, go back to the Elements tab and search for the logo element again.
- Notice the addition of CSS display property to the element now. It has now changed to this:
<h2 class="logo" style="display: none;"><a href="/" title="jQuery">jQuery</a></h2>
- Next, let us bring the logo back, but this time through some animation. Go back to the console tab and type the following command:
$('.logo').toggle(1000)- We are giving a duration of a second for the animation. As you press enter, notice that the jQuery logo re-appears on the page with animation.
Steps to Implement jQuery toggle()
Let us try to implement the whole jQuery toggle example from scratch: You would need an editor (as simple as notepad would also work) and a browser.
Step 1: Open Notepad and paste the following code in it.
<!DOCTYPE html>
<html>
<head>
<!-- This is the CDN for jQuery. It references the jQuery library on the go. Your computer must be connected to the internet. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// Toggle text on click of button 1
$("#btn1").click(function () {
$("#para").toggle();
});
// Toggle image on click of button 2
$("#btn2").click(function () {
$("#pic").toggle(1000);
});
// Toggle both on click of button 3
$("#btn3").click(function () {
$(".ele").toggle(1000, function () {
window.alert("Yayy!!!");
});
});
});
</script>
</head>
<body>
<p id="para" class="ele">EduCBA</p>
<img id="pic" class="ele" src="https://cdn.educba.com/academy/wp-content/uploads/2019/01/cropped-EDUCBA_LOGO.png" />
<br />
<br />
<button id="btn1">Toggle text</button>
<button id="btn2">Toggle image with default animation</button>
<button id="btn3">Toggle both with an alert</button>
</body>
</html>Step 2: Save the file with the extension.HTML. This will save the file as an HTML file.
Step 3: Open the browser and open the file you just saved. The rendered HTML page would look like this.
Output:
Explanation to the above code: Notice that the alert appears twice while hiding and showing the elements. This is because the alert is placed inside a callback function. The callback function is called when the animation for the toggle is completed. This function is called once for each element. Since we are toggling two elements with a single toggle function, the callback function is called twice.
Conclusion – jQuery toggle()
So, we have covered the toggle function of jQuery in this article. We have understood how the toggle function works behind the scenes. Also, once the concept is familiarised with, you would be able to play around more. It is recommended to learn more about the various plugins available in the market for an even advanced toggle experience. You may deep dive into the code for those plugins and understand how they are implemented on top of the jQuery toggle API. Once understood, you may develop your own plugin as well!
Recommended Articles
This is a guide to jQuery toggle(). Here we discuss the syntax, examples, and steps to implement jQuery toggle from scratch. You can also go through our other related articles to learn more –
