While designing a web page or website, there can be a requirement to make an element present in the DOM all the time but in a non-visible manner. For instance, filling some particular fields, which become enabled when clicked outside. In such cases, hiding elements when clicked outside using JavaScript is very helpful, especially in securing a site.

This write-up will guide about hiding elements when clicked outside in JavaScript.

How to Hide an Element When Clicked Outside in JavaScript?

To hide an element when clicked outside in JavaScript, the following approaches can be utilized:

• “addEventListener()” method with “display” property.
• “onclick” event and “display” property.
• “addEventListener()” and “add()” methods.
• “jQuery()” methods.

Let’s look at each of the mentioned approaches one by one!

Approach 1: Hide Element When Clicked Outside in JavaScript Using addEventListener() Method with display Property

The “addEventListener()” method attaches an event to the specified element, whereas the “display” property returns the display type of an element. These approaches can be implemented to associate an event with an element such that the corresponding element hides upon the event trigger.

Syntax

In the given syntax:

• “event” points to the specified event.
• “listener” is the function that will be redirected to.
• “use” is the optional parameter.

Example

Let’s overview the following example for the explained concept:

In the above code snippet:

• Include an “image” element with the specified “id”.
• In the JavaScript code, attach an event to the function named “clickOutside()” using the “addEventListener()” method.
• In the next step, access the included element by its “id” using the “getElementById()” method.
• Finally, refer to the function’s parameter “event” and apply the condition. The condition will be such that if the click is triggered outside the element, the “display” property hides the element.

Output

From the above output, it can be observed that the included image hides upon clicking outside it.

Approach 2: Hide Element When Clicked Outside in JavaScript Using onclick Event and display Property

An “onclick” event invokes a function upon a click, and the “display” property similarly returns the display type of an element. These approaches can be combined to hide the paragraph upon clicking outside it with the help of a function.

Example

Let’s go through the following example:

Perform the following steps as given in the above lines of code:

• Include the stated heading. Also, contain the element, i.e., paragraph with the specified “id” and adjusted dimensions.
• In the JavaScript code, apply the “onload” event such that the defined function is invoked upon the loaded window.
• In the function definition, likewise, access the paragraph using the “getElementById()” method.
• Next, attach an “onclick” event such that the associated function executes upon the click.
• In the function definition, similarly, apply the condition with the help of the fetched element’s “id” such that if the click is triggered outside the paragraph, the element, aka “paragraph”, hides.

Output

From the above output, it is evident that the paragraph hides upon clicking outside it.

Approach 3: Hide Element When Clicked Outside in JavaScript Using addEventListener() and add() Method

The “addEventListener()” method, as discussed, attaches an event to the specified element and the “add()” method adds one or more than one token to the list. These methods can be implemented to similarly attach an event to the function and append the CSS styling to it.

Syntax

In the given syntax:

• “event” corresponds to the specified event.
• “listener” is the function that will be redirected to.
• “use” is the optional parameter.

Example

Let’s follow the below-stated example:

In the above code snippet:

• Likewise, include the stated heading.
• Also, contain the stated image within the “div” element having the specified “class”.
• In the JavaScript code, access the “div” element by its “class” using the “querySelector()” method.
• In the next step, likewise, attach an event to the function using the “addEventListener()” method.
• Also, apply the condition such that if the attached event triggers, the “classList” property along with its method “add()” invokes the CSS styling, thereby hiding the image when clicked outside it.

In CSS, perform the styling for hiding the element upon the triggered event:

Output

The visibility of the image can be observed when clicked on it and when clicked outside.

Approach 4: Hide Element When Clicked Outside in JavaScript Using jQuery() Methods

The jQuery methods can be utilized to directly fetch an element and hide it upon clicking outside it.

Example

The following example explains the stated concept:

Perform the following steps:

• Firstly, add the “jQuery” library to apply its methods.
• Also, include the stated heading with the specified “id”.
• In the JavaScript code, associate the “click()” method with the function. Within the function, access the included heading and apply the “hide()” method to hide it.
• Recall the same approach as the previous step for accessing the heading.
• Here, apply the “stopPropagation()” method, which will result in achieving the desired functionality upon the click.

Output

That was all about hiding elements when clicked outside in JavaScript.

Conclusion

The “addEventListener()” method with “display” property, an “onclick” event and the “display” property, “addEventListener()” and “add()” methods or the “jQuery()” methods can be used to hide an element when clicked outside using JavaScript. This blog guided about the procedure to hide elements when clicked outside in JavaScript.