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.
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..
Final Output →
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<!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/> <!--Start RelatedTopics Section--> <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> <!--End RelatedTopics Section--> </body> </html> |
Further post that would you like to learn in Salesforce
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.
Related Topics | You May Also Like
Create custom dynamically change horizontal tab function using while loop in javaScript | example how to dynamically change the tabs using Javascript function in Javascript/JQuery
How to make custom radio buttons animated with delay cool effect on mouse hover in pure css without JQuery/Javascript | Create dynamic css animation on radio button hover effect with tick mark checked delay animation effect without Javascript/jquery in html
How to create transitions effects of animated slideshow to display text from different direction show/hide based on mouse hover uses of “-webkit-transition:all 0.1s linear” property of css3 without javascript/JQuery | How do you use transition in CSS to display the text and images for delay, scroll and animated CSS without jQuery and Javascript
How to Add Or Remove Row Dynamically in HTML Order List Using JavaScript JQuery With Row Count (index) Value | Create dynamically add/remove rows in html List using JavaScript
How to Build a Custom Left Sidebar Navigation Menu with Submenu using HTML, CSS and JQuery | how to create a responsive navigation menu bar with submenu
How to build a customizable custom selected tabs styles using simple JavaScript, CSS with Count (Index) value on click tab button | How to create a customisable selected tab styles in JavaScript
How to Create a Simple Custom Auto Slider with Next and Previous Buttons in JavaScript, JQuery and CSS | How to Create a Simple Custom Auto Slider with Next and Previous Buttons in JavaScript
Create a Custom Image Gallery With a Horizontal Thumbnail Carousel Simply using Custom JQuery Small Function and CSS for Create Image Gallery | Create multiple image slider in jquery
- Your reaction of the article ▾
Author of w3web.net
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
Hi,Thanks for sharing Great info, please keep sharing .I really love to read your blog.
this is a very good post
this is a very good post
of course this article is very helpful the best way to hide dive is to study w3school which you will provide much more infromation