jQuery Toggle Hide/Show

Anika Tabassum Era Jan 30, 2023 Jul 12, 2022 jQuery jQuery Toggle
  1. Use the toggle() Method of jQuery to Toggle Hide/Show
  2. Use the hide() and show() Methods to Toggle Hide/Show
jQuery 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:

Use the toggle() Method of jQuery to Toggle

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:

Use hide() and show() Methods to Toggle

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn GitHub Facebook

Related Article - jQuery Toggle

  • jQuery Toggle Visibility
  • Toggle Class in jQuery