How to close a div container when click outside target uses of event target value with custom CSS and jQuery loop Javascript functionality | how to show menu details when on click on target link and hide div container when click outside of container using Jquery

Hey guys, today in this post we are going to learn about How to show menu details when on click on target link and hide div container when click outside of container using Jquery.

The hide() method hides the selected elements.

The show() method shows the selected elements.

👉 Download Free Ebook →

👉 Get Free Course →

Why Should You Schedule Meeting?

🎯 If You Are Facing Any Of These 6 Challenges. Schedule Meeting With Me.

Learn Salesforce Development
Career Confusion
No Interview Call
Low Salary
No Promotion/Growth
No Finding New Job Opportunity
Why you stucking from past so many years in same company?

This is similar to the CSS property display:none.

Hidden elements will not be displayed at all.

When an element is hidden with display:none (like in the example above), the element will not take up any space. To know more details about show/hide container, Click Here..

Don’t forget to check out:- How to make custom radio buttons animated with delay cool effect on mouse hover in pure css without JQuery/Javascript. Click Here For More Information

Final Output →

You can download file directly from github by Click Here.

Other related post that would you like to learn in Salesforce

Find the below steps ▾

Create HTML File →

Step 1:- Create HTML File : hideOutCounterW3web.html

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

```
<head>
```

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>How to Hide Div when Click Outside of the Element using jQuery</title>

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

```
<script type="text/javascript">
```
```
 $(document).ready(function(){
```
```
 
```
```
 
```
```
 
```
```
		$(document).click(function(e){
```
```
 
```

			$('.vfHelpText a').each(function(i, value){

```
 
```

              $(this).attr('id','help'+i);

              if(e.target == $('#help' + i)[0])

```
      				{
```

      					$('#help' + i).addClass('active');

```
      				}
```
```
      				else
```
```
      				{
```

      					$('#help' + i).removeClass('active');

```
      				}
```
```
 
```
```
            });
```
```
 
```
```
		});
```
```
 
```
```
    /*end first method*/
```
```
 
```
```
	})
```
```
</script>
```
```
 
```
```
 
```
```
<style type="text/css">
```

    ul.listViewItem{margin:0; padding:0; list-style:none;}

	ul.listViewItem li{padding:0 0 25px 0; display:block;}

    ul.listViewItem  li.vfHelpText a > span{display: none; text-decoration:none;}

    ul.listViewItem li.vfHelpText a.active > span{display: block; color:#ff0000; text-decoration: none;}

```
</style>
```
```
</head>
```
```
 
```
```
<body>
```

<h2 style="font-family:arial; color:#003366; font-size:18px; margin-bottom:30px;">How to Hide Div when Click Outside of the Element using jQuery →</h2>

<ul class="listViewItem" style="margin:0; padding:0; list-style:none;">

 <li class="vfHelpText"><a href="javascript:void(0);" style="text-decoration:none; font-size:18px; font-family:arial; color:#ff8000;">How to change the state of button value.

   <span style="font-size:14px; color:#000000;"><span>A lightning-button-stateful component represents a button that toggles between states, similar to a Like button on social media. Stateful buttons can show a different label and icon based on their selected states.</span>

```
 </a>
```
```
 
```
```
 </li>
```
```
 
```
```
 
```
```
 
```

  <li class="vfHelpText"><a href="javascript:void(0);" style="text-decoration:none; font-size:18px; font-family:arial; color:#ff8000;">How to pass checkbox value, marked required.

     <span style="font-size:14px; color:#000000;">A lightning-checkbox-group component represents a checkbox group that enables selection of single or multiple options. If the required attribute is set, at least one checkbox must be selected. When a user interacts with the checkbox group and doesn’t make a selection, an error message is displayed. You can provide a custom error message using the message-when-value-missing attribute.</span>

```
  </a></li>
```
```
 
```
```
 
```
```
 
```

  <li class="vfHelpText"><a href="javascript:void(0);" style="text-decoration:none; font-size:18px; font-family:arial; color:#ff8000;">How to create lightning-card container.

     <span style="font-size:14px; color:#000000;">A lightning-card is used to apply a stylized container around a grouping of information. The information could be a single item or a group of items such as a related list.</span>

```
  </a></li>
```
```
 
```
```
 
```
```
 
```

  <li class="vfHelpText"><a href="javascript:void(0);" style="text-decoration:none; font-size:18px; font-family:arial; color:#ff8000;">Create Button Menu with Custom dropdown.

     <span style="font-size:14px; color:#000000;">A lightning-button-menu component represents a button that displays a dropdown menu of actions or functions when you click it.</span>

```
  </a></li>
```
```
 
```
```
 
```
```
 
```

  <li class="vfHelpText"><a href="javascript:void(0);" style="text-decoration:none; font-size:18px; font-family:arial; color:#ff8000;">how to set/get required value of Radio Group.

     <span style="font-size:14px; color:#000000;">A lightning-radio-group component represents a group of radio buttons that permit only one button to be selected at a time. The component renders radio button ‘input’ elements and assigns the same value to the name attribute for each element. The common name attribute joins the elements in a group. If you select any radio button in that group, any previously selected button in the group is deselected.</span>

```
  </a></li>
```
```
  </ul>
```
```
 
```
```
  <br/><br/>
```
```
   
```

<div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0; overflow:hidden; clear:both;">

```
 
```

            <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

```
 
```
```
            <br/><br/>
```

            <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>

            <div style="display:block; overflow:hidden;">

                <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

                        <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>

                        <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>

                        <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>

                        <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>

                        <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>

```
                    </ul>
```
```
            </div>
```
```
 
```

            <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

                        <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>

                        <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>

                        <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>

                        <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>

                        <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>

```
                    </ul>
```
```
                </div>
```

               <div style="clear:both;"></div>

```
               <br/>
```

                <div class="youtubeIcon">

                    <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>

```
                </div>
```
```
    </div>
```
```
 
```
```
</div>
```
```
 
```
```
  
```
```
</body>
```
```
</html>
```

Further post that would you like to learn in Salesforce

TechW3web:- To know more, Use this Link

FAQ (Frequently Asked Questions)

How do I hide a drop down menu?

If you simply want to show and hide dropdown menu on mouse hover you don't need any JavaScript. You can do this simply using the CSS display property and :hover pseudo-class.

How do I toggle Show hide in jQuery?

The toggle() method toggles between hide() and show() for the selected elements. This method checks the selected elements for visibility. show() is run if an element is hidden. hide() is run if an element is visible.

Which CSS property is used to show dropdown items?

Instead of using a border, we have used the CSS box-shadow property to make the dropdown menu look like a 'card'. The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net