Skip to main content

Solution - Hide a div when user clicked outside of it using jQuery

Solution - Hide a div when user clicked outside of it using jQuery


If you want to hide an element like listbox, div or dropdown or any html element when click outside of it but not hide when click inside of it then we can do this by using simple jquery code
Please use below code to hide an element on outside click.


$(document).mouseup(function(e) 
  {
      var containerElem = $("#list-request-suggestion"); //YOUR ELEMENT ID OR CLASS
      if (!containerElem.is(e.target) && containerElem.has(e.target).length === 0) 
      {
          containerElem.hide();
      }

  });
 

Related Links

Hide a div when clicked outside of it

How do I detect a click outside an element?

How to hide div on outside click except one inside div through jquery 

html - Use jQuery to hide a DIV when the user clicks outside of it

Labels:

Comments

  1. Unknown1 March 2020 at 22:48

    If you're looking to lose weight then you have to start following this totally brand new personalized keto meal plan.

    To produce this service, licensed nutritionists, fitness trainers, and cooks united to produce keto meal plans that are effective, painless, economically-efficient, and satisfying.

    Since their launch in January 2019, thousands of people have already remodeled their figure and well-being with the benefits a proper keto meal plan can provide.

    Speaking of benefits: in this link, you'll discover 8 scientifically-certified ones offered by the keto meal plan.

    ReplyDelete
  2. vulmanis_ro23 April 2022 at 09:48

    vulmanis_ro Ian Parra https://wakelet.com/wake/0nQ_w7aghwsGzXyxknPjJ
    talnerssandsund

    ReplyDelete
  3. Yrannetur-ko30 November 2022 at 10:21

    Yrannetur-ko Wewere Tucson Click here
    Link
    diotrucuntab

    ReplyDelete

Post a Comment

Popular posts from this blog

Run and compile sass scss file to css using node

  Today we learn how to use scss and generate css using node  or Run and compile sass scss file to css using node   So please follow simple  steps :-   Today we will create a project that can read scss file and generates css with it  Note: Make sure you have installed node in your system. If you want to help to install node js based on your system then check our other tutorial or check node js official website. Now create a blank folder and open  terminal(linux) or cmd(windows) and navigate to your current project folder by using cd command Now run below command npm init after enter it will ask you some package info that you can fill according to you or just keep enter until it finished. The above command will generate package.json file Now  we will install npm module that will convert our scss to css Run below command: npm install node-sass So we have installed node-sass package . Now open package.json file in your...
12 comments
Read more

How to retrieve Facebook Likes, share , comment Counts

function facebook_count($url){     // Query in FQL     $fql  = "SELECT share_count, like_count, comment_count ";     $fql .= " FROM link_stat WHERE url = '$url'";     $fqlURL = "https://api.facebook.com/method/fql.query?format=json&query=" . urlencode($fql);     // Facebook Response is in JSON     $response = file_get_contents($fqlURL);     return json_decode($response); } $fb = facebook_count('https://www.facebook.com/BahutHoGyiPadhai'); // facebook share count echo $fb[0]->share_count;  echo "like"; // facebook like count echo $fb[0]->like_count ; echo "comment"; // facebook comment count echo $fb[0]->comment_count;  ?>
18 comments
Read more

Solution-windows 'expo' is not recognized as an internal or external command

Solution for expo is not recognized as an internal or external command,operable program or batch file in Windows 10 Sometimes expo will not work globally mostly in windows 10, If you are facing same issue then follow the below Steps 1) Click on windows button and search for  " Environment variables"  and click on "Edit the system environment variables" 2) Now you will see a popup like below screen. Then you need to click on Environment Variables. (Please see highlight part in below image)     3)Then click on new button that i have highlighted in below image 4. Then a popup will open and you need to fill details like below mentioned Variable Name :Path Variable Value: %USERPROFILE%\AppData\Roaming\npm Here we are creating a new path variable and passing location of npm.   Now Click on OK and close all the terminal windows and open new CMD or terminal and type Expo . Great now you can access expo from any...
23 comments
Read more