22 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 10+ members
  • Has collected 50+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
stevecastaneda says

I’m having a little trouble with this JQuery function.

Basically, I have a div, that when clicked, shows another Div. It’s set to a toggle, actually, so it toggles on/off when you click.

I want to have it where if you click on anywhere outside of the opened div (that appears after you click on the first div), the div that was opened is closed.

I thought I could do this by simply binding a click event to a parent container div, but it seems that the click event carries to all child elements as well, and then the div never opens when you click.

Does that make any sense?

Thanks in advance for any help!

1799 posts
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+4 more
BroOf says

Here is a solution I think: Click ME

Explanation: If you klick on a link or a div with the ID ’#link’ it will toggle the div with the ID ’#divLoginBox1’

The return false is for not consulting a anchor or something.

If you click on the same link again the ‘e.stopPropagation();’ will cancel your action.

If you click somewhere else the div will hide.

I hope it helps you!

Greetz: BroOf

22 posts
  • Has been part of the Envato Community for over 6 years
  • Has referred 10+ members
  • Has collected 50+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
stevecastaneda says

Thank you so much; that works wonderfully! I greatly appreciate you taking the time to write out the code for me.

Also, showing me that IF statement helps me when I don’t want to use toggle(), so I learned something there too.

THANK YOU !

1799 posts
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+4 more
BroOf says

Hey no problem. This wasn’t my own code. I’ve found it a few month ago but i think you lernd something :D!

good night!

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by