jQuery $.toggle - Show/Hide Elements

The toggle method of jQuery hides the specified visible elements and displays the hidden elements.

Use the toggle method if you need to allow users to show or hide any elements like div, menu, paragraphs, etc. in your web pages by giving a switchable option.

If only a single target is required, for example, only allowing to hide a visible element or showing a hidden element then you should use $.hide and $.show methods, respectively.

Syntax of the toggle method

This is how you may use the toggle method:

$(selector).toggle(speed,callback)

Where, a selector can be a div, paragraph, class, ID, HTML table, list, etc.

Following are a few examples of using the jQuery toggle method with codes where I will use different parameters of the toggle method as well.

A basic example of using toggle with div

In this example, I will use the toggle jQuery method to show or hide a div element. As you click on the button “Show/Hide” if the div element is visible it will be hidden and vice versa.

Complete code:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
   <script>
   
   $(document).ready(function() {
     $("#show_hide").click(function () {
     $("#toggle_tst").toggle()
  });
  });
   </script>
<style>
#toggle_tst{
    width:250px;
    height:250px;
    border: solid 1px green;
    background:#fff;
    margin:20px;
}
</style>
</head>

<body>
<button id="show_hide">Show/Hide div</button> 
   <div id="toggle_tst">
     The div element with some text. <br /><br /> Click Show/hide button to check toggle method!
   </div>

</body>
</html>

In the click event of the button, I placed the jQuery toggle method which is attached to a div element with id: toggle_tst.

jQuery code:

<script>

$(document).ready(function() {
$("#show_hide").click(function () {
$("#toggle_tst").toggle()
});
});
</script>

In this example, I simply used toggle method without using any parameters or options like duration, easing effect, or a callback function that I will use in coming examples.

A toggle example with ease and callback function options

In the following example, different options available with the toggle jQuery method are used.

The method uses duration, ease, and call back function in the toggle method.
When the duration is used in toggle method, this method becomes an animation method.
In the duration parameter, you can use strings e.g. “fast” or “slow” or provide time in milliseconds.
The more the value of milliseconds the slower will be animation.
Whereas, the value provided as fast means 200 milliseconds and slow means 600 MS.
In the following example, I will use duration as well as the callback function.
The callback function will execute as the animation is done.
You may perform some action at the end of the animation or show some descriptive message to your visitors.
The example also uses easing option.
If you are using the jQuery library only, you may specify swing (which is the default) or “linear” options.
While jQuery UI library is used, other easing options may also be specified. In this example, I will use the jQuery library to use other easing options.

Online demo and code

As you can see, I have created a circle with some text (basically for jQuery show / hide div example). When you click on the “show/hide” circle button, the toggle jQuery method will be called with three options.

The duration is set to 1500 ms, the easing value used: easeOutQuint (you must include jquery UI library for that to work) and finally a callback function. As the animation is completed an alert will be shown which is placed inside the callback function. The following code is used in the jQuery part:

   <script>
   
   $(document).ready(function() {
     $("#show_hide").click(function () {
         $("#toggle_tst").toggle(1500,"easeOutQuint",function(){
          alert("A callback function as .toggle completes!");
          });
  });  
  });
   </script>

You can see the full code on the demo page.

A jQuery toggle example with specialEasing option

In this example, the specialEasing option is used. For that, I have included jQuery UI library that allows to use of different values for easing, which is used for height and width properties.

The code:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"> </script>
   <script>
   
   $(document).ready(function() {
     $("#show_hide").click(function () {
$( "#toggle_tst" ).toggle({
        duration: 3000,
        specialEasing: {
          width: "easeOutElastic",
          height: "easeInBounce",
        },
        complete: function() {
        //  alert( "Animation complete!" );
        }
    });
  });  
  });
   </script>

<style>
#toggle_tst{
	padding: 8px;
    background:#2B5F8E;
	width: 250px;
    height:250px;
	box-shadow: 0 0 5px #aaa;
    font-size: 25px;
    color:#fff;
    text-align:center;
    border-radius: 150px;

}
button{
   margin: 30px 60px;
    
}
</style>
</head>

<body>
<button id="show_hide">Show/Hide Circle</button> 
   <div id="toggle_tst">
     Toggle with specialEasing!
   </div>


</body>
</html>

The list of available easing values can be seen on the official website: http://jqueryui.com/easing/

An example of a show/hide menu

In this example, I have created a vertical menu with general menu items. The menu items are created inside a parent div element by using an unordered list tag, ul. The menu’s CSS and HTML is also given.

Also, I used a link rather than a button in this example to show/hide or toggle the div element.

Mark up and jQuery:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
   <script>
   
   $(document).ready(function() {
     $("#show_hide").click(function () {
$( ".men_ex" ).toggle({
        duration: 3000,
    });
  });  
  });
  
  
  
   </script>

<style>
.men_ex{
    border-radius:5px;
}
.men_ex ul {
    margin: 0; 
    padding: 0;
    width:185px;
    list-style-type: none;
    
}

.men_ex ul li a {
    text-decoration: none;
    color: #fff; 
    padding: 10.5px 11px;
    background-color: #DA8119;
    display:block;
    border-bottom:solid 1px #000;
}
 
.men_ex ul li a:visited {
    color: white;
}
 
.men_ex ul li a:hover, .men_ex ul li .current {
    color: #000;
    background-color: #FBE9AC;
}

#show_hide{
   position:fixed;
   margin: 30px 30px;
}
</style>
</head>

<body>
<div class="men_ex">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<a href="#" id="show_hide">Show/Hide Menu</a> 

</body>
</html>

Upon clicking the show/hide Menu link, the div containing the vertical menu will disappear for a duration of three seconds. As I did not specify the easing value, it will use default i.e. swing.

Unlike the above example where I used easing values other than swing and linear, you do not need to include jQuery UI library for swing and linear effect. Remember that, when you specify the duration parameter the jQuery toggle method becomes an animation method.

Image show/hide example

In the following example, an image tag is created with its ID. As you click on the show/hide link, the image will disappear if visible and shown if hidden.

Code:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>

   <script>
   
   $(document).ready(function() {
     $("#show_hide").click(function () {
    $( "#j_image" ).toggle({
        duration: 3000,
    });
  });  
  });
   </script>

<style>


#show_hide{
   position:fixed;
   margin: 30px 30px;
}
</style>
</head>

<body>

<img id="j_image" src="jquery.jpg" />

<a href="#" id="show_hide">Show/Hide image</a> 

</body>
</html>

You can see an animating image is just like another element that I used in the above examples. You simply need to call it by its ID or class name etc. and use the toggle jQuery method. If you do not use the duration parameter, the image will appear and disappear in a flash.

I used 3000 milliseconds value which is three seconds.

A CSS table example to hide and visible by toggle method

In this example, an HTML table is created with a few CSS properties. When you click on the button, Show/Hide table, the table will hide if visible. If the table is not visible, upon clicking the button, the table will be visible.