Develop Reference

hide toggle content, if a user didnt click inside a specific box

I have this code for toggling menus on my site. It will open a menu on click, close others open when you click another and close them all if you click outside.
The issue is, I'm now using this for my search bar to appear too, but if you click inside the search box it vanishes - woops. Would it be possible to amend the hiding code to detect if the user wasn't clicking inside a specific area of the code?
// navbar toggle menu
$(document).on('click', ".toggle-nav > a", function(event) {
event.preventDefault();
event.stopPropagation();
var $toggle = $(this).closest('.toggle-nav').children('.toggle-content');
if ($toggle.hasClass('toggle-active'))
{
$($toggle).removeClass('toggle-active');
}
else
{
$(".toggle-content").removeClass('toggle-active');
$($toggle).addClass('toggle-active');
}
});
// hide the toggle-nav if you click outside of it
$(document).on("click", function ()
{
$(".toggle-content").removeClass('toggle-active');
});

Instead of using click, this uses mouseup. If the target is, for example #search-bar, it won't remove toggle-active from toggle-content elements.
$(document).mouseup(function(e) {
if (!$(e.target).is('#search-bar')) {
$(".toggle-content").removeClass('toggle-active');
}
});
You can see it in action with this jsFiddle.
Hopefully this helps.

When the navbar closes with a click away, how i can turn off following links or excecute buttons, if the click was on such an item?

I use bootstrap 3, Html 5 and CSS 3. The website has a navbar and it closes if the user clicks away of the navbar. But if the user clicks then on an item like a link it follows the link. How i can block those elements when i click away from the navbar for closing the drop down of the navbar? I want to remove those side-effects.
$('body').click(function (event) {
// If user does not click on navigation and navigation drop down is visible.
if (!($(event.target).is('#navigation *')) && $(".navbar-collapse").is(":visible") && $(".navbar-toggle").is(":visible")) {
event.preventDefault();
$('.navbar-collapse').collapse('toggle');
}
});
What do I have to add that the area which is shown on screen next to the navigation do not excecute links etc. when the user clicks them for closing menue..
Thank you already!

When clicking on the navigation bar, you need to disable the click event.You can do it with javascript.
jQuery( '.dropdown-menu > li' ).click( function(e){ e.stopPropagation(); });

Prevent materializecss dropdown to close when clicking inside it

I am using Materialize.css for current project, and I have dropdown with some input forms inside it.
Dropdown has option to close by:
clicking outside of .dropdown-content
clicking inside of .dropdown-content
clicking on .dropdown-button
What I need is to not close when clicking inside of it, because i need to be able to fill in input forms and other actions.
Here is simple example

Quick solution would be to stopPropagation on click on content wrapper.
$('.dropdown-button + .dropdown-content').on('click', function(event) {
event.stopPropagation();
});
I would avoid using 'dropdown' for this particular use-case.
But if you want to stick to it just apply the snippet above.

You can use for example:
$('#first_name').click(function (event) {
event.stopPropagation();
//Do whatever you want
});
to avoid the event generated by the input first_name from propagating. The dropdown will not detect it so it will not be closed.

use this "closeOnClick : false" on dropdown initializing
$(".dropdown-trigger").dropdown({
closeOnClick : false
});

Toggle Bootstrap dropdown by click on the link in modal

When a form submitted the modal box appears. This box contains a text with a link. Click on this link should close this box and toggle dropdown (auth form). The problem is that I can't handle toggling the dropdown by clicking this link.
Here is the code of click-handler of this link
$(function() {
$('#open_auth_form').click(function(e) {
e.preventDefault();
$('#participate_modal').modal('hide');
$('#auth_link').dropdown('toggle');
});
});
Why doesn't it work? I tried also to move dropdown toggling inside the 'hide.bs.modal', tried .trigger('click'). Nothing helped. But simple running
$('#auth_link').dropdown('toggle');
from console works well.

Check out this stack overflow question on How to open Bootstrap dropdown programmatically. There are a number of solutions you can try such as:
Triggering the click.bs.dropdown event:
$('#dropdown').trigger('click.bs.dropdown');
Or manually adding/removing the classes:
$('.dropdown').addClass('open'); // Opens the dropdown
$('.dropdown').removeClass('open'); // Closes it

In my case it was enough to add
e.stopPropagation();

How to hide a div on click of another dropdown link?

I have a bootstrap navigation menu where I have also added a search icon. The search icon shows up the search box on click. Added a toggle in the search icon to show and hide the search box.
Now, when I click on the search icon and it is it open state showing the search box and then I click on any one of the dropdown menu in the navigation menu the dropdown appears over the search box.
I need to close the search box once any other dropdown menu is clicked. I know its very simple but but not getting a proper solution. Can anyone suggest?
Here is the link of the code:
JSFiddle
$('.tablet-toggle a').click(function (e) {
if($('ul.dropdown-menu.tablet-toggle').css('display') == 'block'){
$('.desktop-search').hide();
}
});
$(".search-icon").click(function () {
$("#searchForm form").slideToggle("fast", function() {
// Animation complete.
});
});

Check this out, updated Fiddle:
http://jsfiddle.net/uw08ddmm/7/
$('a.dropdown-toggle').click(function (e) {
$('.desktop-search').toggle();
});

You may try the following code:
Hide the search form when any dropdown menu in the navbar is clicked.
$('.navbar a.dropdown-toggle').click(function (e) {
// Use slideUp here to consist the animation behavior with slideToggle
$('#searchForm form').slideUp('fast');
});

Have you tried this?
window.onload = function(){
$('.nav li.dropdown').click(function(){
$('.desktop-search').hide();
});
};

You may try this: This will close the search box if click happens any other place of the page but on search icon:
<script>
$(document).ready(function(){
$(document).on('click',function(){
$('.desktop-search').hide();
});
});
</script>
Make sure that on Search Box open event the following line should be written:
event.stopPropagation();