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. duration: Control the effect's duration with parameters like fast, slow, or the (default value of 400) milliseconds.

hide (, , ) duration, easing, and callback are optional parameters. This way whenever you get a result from the AJAX. hide (, ) ().

This is how you may use the toggle method: 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. I think the easiest way would be to always have the empty result div in your html and just keep it hidden. Where, a selector can be div, paragraph, a class, ID, HTMl table, lists etc.įollowing 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. 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. 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.Ī toggle example with ease and callback function options In the click event of the button, I placed jQuery toggle method which is attached to a div element with id: toggle_tst. 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 boxs overflow is set to hidden in order to hide the span that reaches below the bottom border of the box. Here is the Script: $(document).The more the value of milliseconds the slower will be animation. And then if you click anywhere else (not on the div) it toggles off. I basically want the div to toggle on when you click on a button. I am trying to do the simple hide div when you click on the document.

Jquery hide xpanel div