jQuery toggle method to show/hide elements with 6 examples

The toggle method

The toggle method of jQuery will hide specified visible element and display the hidden elements. Use toggle method if you need to allow users 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 div, paragraph, a class, ID, HTMl table, lists etc.

Following are a few examples of using the jQuery toggle method with codes where I will use different parameters of toggle method as well. Click on the given links or demo images to see it online.

Basic example of using toggle with div

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

See online demo and code

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

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 toggle jQuery method are used. The method uses are 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 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 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 default) or “linear” options. While if  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 option.

See 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 animation is completed an alert will be shown which is placed inside the callback function. Following code is used in the jQuery part:

1 2 3 4 5 6 7 8 9 10

<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 full code in 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 different values for easing, which is used for height and width properties. See example by clicking the link below or image:

See online demo and code

You can see in code (script section) the value used for width is easeOutElastic and for height its easeInBounce.

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

An example of 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 unordered list tag, ul. The menu’s CSS and HTML is also given.

Also, I used a link rather a button in this example to show / hide or toggle div element. Click on the link below to see live demo and code:

See online demo and code

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

Unlike 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 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 show/hide link, the image will be disappeared if visible and shown if hidden.

See online demo and code

You can see an animating image is just like another element that I used in above examples. You simply need to call it by its ID or class name etc. and use toggle jQuery method. If you do not use 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. Look at example by clicking the link below:

See online demo and code

You can see the table hides or appears at the duration of two seconds.