I'm trying to achieve that a div
hides if user clicks anywhere except on the element. I've got following code doing toggle()
if user clicks on a button. I want the button click to stay plus if the Details
element is visible, reacts to other parts of the screen.
$('.nav-toggle').click(function() { //get collapse content selector var collapse_content_selector = $(this).attr('href'); //make the collapse content to be shown or hide var toggle_switch = $(this); $(collapse_content_selector).toggle(function() { if ($(this).css('display') == 'none') { //change the button label to be 'Show' toggle_switch.html('Show Details'); } else { //change the button label to be 'Hide' toggle_switch.html('Hide Details'); } }); });
You can resort to the concept of event delegation.
$(function() { $(document).on('click', function(e) { if (e.target.id === 'div1') { alert('Div Clicked !!'); } else { $('#div1').hide(); } }) });
Check FIDDLE
I did not understand what you meant by integrating with the other part.. This is the basic idea..
You can use the jQuery .blur()
function to hide a div when user click on other element (like link, boutton, whathever..)
The blur event is fire when an element is loosing the focus (user select another element on the DOM tree)
I don't understand the link with your toggle. If your toggle button manage the DIV, its inside the toggle function that you should place the hide()/show() on the div, in the same time as updating the text of the button.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With