Hide a div using jQuery when

Question

I have a list of items, each of which needs to show a div. Click on one, and it shows you a div with tweets in it. I've been able to successfully show the divs with jQuery. Unfortunately, I have no clue how to hide the divs when the user clicks outside of said div. I've tried fiddling around with the .not() selector, but I just can't do it. Here's my code:

$("#twitter-wid").click(function() {
$(".recent_tweets").fadeIn(400);
});

In this case, #twitter-wid is the 'li' item, and .recent_tweets is the div element that I need to show. I want it such that when the user clicks anywhere out of .recent_tweets that it should hide. I've so far tried to add:

$.not('.recent_tweets').click(function() {
$('.recent_tweets').hide();
});

But to no avail. Oh and I'm new to jQuery. Thanks!

EDIT: I wonder how Twitter does it for their little drop-down menu. Click on your username and it drops down a bunch of options. Click anywhere out and it slides up.

If you wonder how twitter does it: go read their code. There is absolutely nothing wrong with reading through code someone else wrote to see how they solved a problem. Just don't copy-pasta it unless you're allowed to. — zzzzBov
– zzzzBov, Commented Nov 8, 2010 at 5:48

Sarfraz · Accepted Answer · 2010-11-08 05:22:24Z

2

There is outside event jquery plugin you may want to use:

$(".recent_tweets").bind( "clickoutside", function(event){
  $(this).hide();
});

answered Nov 8, 2010 at 5:22

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Goobi Over a year ago

Thanks. The problem is that now I can't get it to show when #twitter-wid is clicked (because that's outside .recent_tweets).

jargalan · Accepted Answer · 2010-11-08 05:27:15Z

1

 $(document).click(function() { //Click anywhere
  $('.recent_tweets').hide();
 });

//ADDED for inside click

$('.recent_tweets').click(function(e){
     e.stopPropagation();
 });

edited Nov 8, 2010 at 5:27

answered Nov 8, 2010 at 5:21

jargalan

5,2645 gold badges29 silver badges36 bronze badges

6 Comments

dpmguise Over a year ago

this would still hide the div if they clicked inside it... perhaps add a check to see if the mouse loc is inside recent_tweets?

Goobi Over a year ago

Yep, @dpmguise is right. Now the .recent_tweets div doesn't show at all.

jargalan Over a year ago

you can stop all propagation of the event when you click inside

jargalan Over a year ago

this link might be useful for you rob-bell.net/2009/02/…

Goobi Over a year ago

^^ I think that should be useful. I'll look through that code and figure it out. Thanks, you've been of great help!

|

Collectives™ on Stack Overflow

Hide a div using jQuery when

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related