How to close a div container when click outside target uses of event target value with custom CSS and jQuery loop Javascript functionality

[vijayk3327]

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.

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.

👉 Get source code live demo link:-

Create HTML File →
Step 1:- Create HTML File : hideOutCounterW3web.html

`

<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>

How to Hide Div when Click Outside of the Element using jQuery →

• How to change the state of button value. 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.
• How to pass checkbox value, marked required. 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.
• How to create lightning-card container. 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.
• Create Button Menu with Custom dropdown. A lightning-button-menu component represents a button that displays a dropdown menu of actions or functions when you click it.
• how to set/get required value of Radio Group. 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.

        <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>

`

👉 Get source code live demo link:-