HIDE A DIV ON CLICKING OUTSIDE IT WITH JAVASCRIPT/JQUERY

The toggle method

The toggle method of jQuery will hide specified visible element & display the hidden elements. Use toggle method if you need to lớn allow users show or hide any elements like div, menu, paragraphs etc. In your website pages by giving a switchable option.

Bạn đang xem: Hide a div on clicking outside it with javascript/jquery

If only a single target is required, for example, only allowing to lớn 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 link or chạy thử images to lớn see it online.

Basic example of using toggle with div

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

*

See online demo & code

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


1
2
3
4
5
6
7
8

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.

Xem thêm: Nước Dừa Với Bà Bầu - Những Lưu Ý Khi Mẹ Bầu Uống Nước Dừa


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 & 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 kích hoạt 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 lớn use other easing option.

*

See online demo và 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 khổng lồ 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: