Skip to content

Instantly share code, notes, and snippets.

@lutsen

lutsen/toggle_on_click.js

Last active December 27, 2015 06:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lutsen/7284117 to your computer and use it in GitHub Desktop.
Save lutsen/7284117 to your computer and use it in GitHub Desktop.
Download ZIP
This jQuery based script shows an element, and hides it again by clicking anywhere in the <body>You can use it to show popovers or modals for example.In the example, if you click on any element with the class "info", a child element with the class "info-tip" is shown.
Raw
toggle_on_click.js
// Shows an element, and hides it on clicking anywhere in the <body>
function toggleOnClick(target) {
// Show
$(target).fadeIn("fast", function() {
$('body').on('click', function() {
// Hide on click outside
$(target).fadeOut("fast");
});
});
}
$(function (){
// Show .info-tip on clicking .info
$('.info').on('click', function() {
toggleOnClick($(this).find('.info-tip'));
});
});
Raw
ꞈexample.css
.info {
cursor: pointer;
}
.info-tip {
z-index: 1;
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment