How to Toggle Hide/Show in jQuery
-
Use the
toggle()Method of jQuery to Toggle Hide/Show -
Use the
hide()andshow()Methods to Toggle Hide/Show
The jQuery library minimizes the usage of a pile of codes and helps with solutions with fewer code lines.
Till jQuery version 1.8, the toggle() method was widely used, and in version 1.8, it was deprecated. In version 1.9, it was removed with a distinct token.
We will discuss in our example how the toggle() function works and why it was discouraged later. Another way to perceive the solution for the toggle behavior is to use the show() and hide() methods.
In this regard, we will consider a conditional statement, so we can use one button to perform the toggle task. Let’s dig into the instances for better visualization.
Use the toggle() Method of jQuery to Toggle Hide/Show
In the use case of the toggle() method, we generally trigger it by a click event. Again, in the implementation of the method, there is another click event along with a preventDefault().
So, it nullifies the double click event and is supposed to work correctly. But the method is too straight-forwarded and often causes issues if more than two times the event gets called.
So, to get rid of this ambiguous characteristic, later, the method was removed. Yet, it is still seen as being used for being explicit, and it can be used with fewer lines of codes rather than in any other way.
Let’s see the code for the demonstration of the function.
Code Snippet:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#ele1").click(function(){
$("#ele2").toggle(1500);
});
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>
Output:
-method-of-jquery-to-toggle.webp)
Use the hide() and show() Methods to Toggle Hide/Show
Here, we will initiate with the instance of the click event and later generate a conditional statement to check if the content is visible when the button is clicked. If it drives to a truth case, we set it to hide(); otherwise, we will set it to show().
Let’s check the code blocks and examine the process.
Code Snippet:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#ele1").click(function(){
var x = $('#ele2');
if(x.is(':visible')){
x.hide("slide");
}
else{
x.show("slide");
}
});
});
</script>
</head>
<body>
<p id='ele2'>Content to be toggled.</p>
<button id='ele1'>Show / Hide</button>
Output:
-and-show()-method-to-toggle.webp)
