We Keep Coding

jQuery toggle on click out

I have a series of spans (togglers) and a series of divs (toggled). I created a make_toggle function that receives the toggler and its corresponding toggled as arguments.
Everything seems to work kind of ok up to the point where I try to implement a "toggle on click out". What I've tried is to attach to the html click event a function that checks whether the target of the click is contained within the toggled element. On toggle "back", I would then detach the handler so I am only checking when I need.
var check_if_clickingout = function(e) {
if (!toggled[0].contains(e.target)) {
toggle();
}
};
See fiddle: https://jsfiddle.net/andinse/65o211nc/11/
It doesn't even seem to work anymore but when it used to, it was triggering many more times than necessary (which was the reason for me to come here ask for help).
What am I doing wrong? What is the most effective way to go about this kind of situation where I am giving functionality to a series of independent DOM elements?

Just putting this out here that this seems to do the same thing.
$("span").click(function() {
$(this).siblings("div").toggleClass("blue");
});
Maybe I am missing something more that I am not seeing in your example.
See more: http://api.jquery.com/toggleclass/

Jquery SlideToggle, prevent toggle in particular circumstance

So I have an H3 that has a grey background rectangle. When you click anywhere in that grey background, a particular div performs a slideToggle(). This works fine.
Now, Inside that H3 I also have a link that calls a jquery function that does something. That works fine too.
But my issue is this, since the link is inside the H3, after its functions executes, it also executes the slideToggle() because I clicked somewhere inside the H3.
So the question becomes, How do I prevent the slideToggle() from happening when I click on the link. I imagine I can use a flag but I'm hoping there is a more elegant way.
Any help would be appreciated.
The HTML code
<h3 id="data_id">
<a href="#" id="random_id" >Random</a>
</h3>
<div id="data_div_id">
// The data here is irrelevant to the issue at hand
</div>
The Jquery Code
$('#data_id').click(function() {
$('#data_div_id').slideToggle('slow');
});
$('#random_id').click(function(event) {
// it does something irrelevant to the issue at hand
});

You can use event.stopPropagation() to stop the event from bubbling.
jsFiddle here.
$('#data_id').click(function() {
$('#data_div_id').slideToggle('slow');
});
$('#random_id').click(function(event) {
event.stopPropagation();
});

Try skipping the element you don't want the event for:
$('#data_id').click(function(event) {
if (event.target !== this)
return;
$('#data_div_id').slideToggle('slow');
});
Like this only #data_id will trigger the toggle and since your h3's are in that div it gets executed when you click on them too, but only once from actually clicking the container

Trigger Javascript click/touch event only if NO other events are simultaneously triggered?

I'm trying to make a navigation menu which is hidden from view but that which appears by touching/clicking on the screen.
The problem I see is that touching/clicking many places on the screen could open the navigation menu while simultaneously triggering an event on whatever button, link, etc. that might have been in the vicinity.
So far, I'm trying to handle this with a :not clause in jQuery. Unfortunately there is something not work with the :not clause as the toggling happens regardless of where you click within the body.
HTML:
<div id="NavigationMenu">i'm the navigation menu</div>
<div class="icon-reorder">toggle</div>
<div id="main_content">i'm the main content
<button type="button">button</button>
</div>​
JS:
$(document.body).on('click', ['body:not(".btn, a, i, button, input, textarea")', '.icon-reorder'], function(){
console.log('clicked');
$('#NavigationMenu').toggle();
$('#main_content').toggle();
});
$('button').on('click', this, function(){
console.log('button clicked');
});
Might someone be able to help with this code? Or is this even the right way to go about solving this problem? It looks a little hack-ish to me.
This navigation menu is the main one for my site so having an annoying UI/UX (nav opens too much/too little) is a deal breaker. I mainly interested in touch compatible code but any and all UI/UX suggestions would be welcome...

Instead of using a :not clause, why not use event delegation (which, I only learned two months ago, is a fancy term for handling the events with a callback, on a parent element)
$(body).on("click", function(event) {
if(event.target.type !== "button" && <whatever other conditions>) {
<toggle menu>
}
});
Here's an updated Fiddle . I'm logging the click event object to the console so you can look at event.target and see if there's anything more suited to your needs to compare to

Mouseover events in one object, and mouse out events on an object resulting of the first event

The title is a little bit messy, so let me try to explain in the actual question:
Suppose I have the following HTML setup.
<div id="userMenu">
<div id="userMenu-expanderLink">Mouseover here!</div>
<div id="userMenu-collapserLink">You can close the menu by mouse out.</div>
<div id="userMenu-expandedContent">Extra Content</div>
</div>
Now, userMenu and userMenu-expanderLink are shown by default. userMenu-expandedContent and userMenu-collapserLink are hidden by default.
What I am trying to do in jQuery is to slideDown the userMenu-expandedContentwhen a mouseover event occurs on userMenu-expander. All good there, this is my code:
$("#userMenu-expanderLink").mouseover(function() {
$("#userMenu-expandedContent").stop().slideDown(200);
$("#userMenu-expanderLink").hide();
$("#userMenu-collapserLink").show();
$("#userMenu").addClass("userMenu-expanded");
});
As you can see, I'm also hiding the expanderLink and showing the collapserLink; and also adding a class called userMenu-expanded to #userMenu. Until now, this code has no problems. Everything works well.
But now, I want that when the user has a mouseOut event on #userMenu.userMenu-expanded, effectively moving his mouse out of the #userMenu that is expanded, I want when that happens, the expandedContent is slideUp'd, the expander and collapser links swapped, and the class removed. I know how to do that, but handling the event seems to be a problem.
Putting $("#userMenu.userMenu-expanded")... directly alongside the code I have of course does not work, since a div with such id and such class is only generated if the menu has been expanded, and the div's class is removed once the menu is collapsed. I don't directly use a mouseover/mouseout event on one object because I want the collapsing to be triggered only when the user takes his mouse out of the menu, not the expander link.
So, here's my problem. How can I get such mouse out event? I have tried adding the event handler in the callback of .addClass, but no avail, it would basically permanently close that expanded menu (basically I can't ever expand it again until I reload the page).
How can this be done? I'm not very experienced with jQuery, so a detailed answer would be most appreciated. I'm more interested on how can this be done rather than just accomplishing it, I want to learn ^_^.
Thanks!

I have found a correct way to do this. This is my final implementation.
$(document).ready(function() {
// UserMenu Expander, which is also a form of drop down
$("#userMenu-expander").mouseenter(function() {
//alert("Usermenu expanding…");
$("#userMenu-expandedContent").slideDown(200, function() {
$("#userMenu").addClass("userMenu-expanded");
});
$("#userMenu-expanderLink").hide();
$("#userMenu-collapserLink").show();
});
$("#userMenu.userMenu-expanded").live('mouseleave', function() {
//alert("Usermenu de-expanding…");
$("#userMenu-expandedContent").slideUp(200);
$("#userMenu-expanderLink").show();
$("#userMenu-collapserLink").hide();
$("#userMenu").removeClass("userMenu-expanded");
});
});

jquery problem:on click function is not showing the h3 title?

i have this jquery script that clicks on link add info then hides it and brings up a form. and when you press cancel it needs to show the h3 again, but it deosnt show it, i dont know why:
heres my working code: http://jsfiddle.net/GLqcx/2/

$("h3").show();
should be
$("h3 a").show();

In your .addInfo click handler, you are hiding the <a> with this line:
$(this).hide();
However, in your .cancelInfo click handler, you are showing the <h3>:
$("h3").show();
You'll need to change one or the other, so that you are hiding/showing either the <h3> or the <a>.
I've taken the liberty of fixing your problem and optimizing your code a bit. Here's what I came up with:
$(".cancelInfo").click(function(e) {
e.preventDefault();
$(this).parent().hide().next().show();
});
$(".addInfo").click(function(e) {
e.preventDefault();
$(this).parent().hide().prev().show();
});
Here's a demo showing that code in action ->
Instead of using broad selectors, we are now using our knowledge of the document structure to traverse to and manipulate the correct elements. In addition, we are only doing one selection, thus saving some time and work.

Or alternatively,
$("h3").hide();
instead of $(this).hide()
As you are hiding the a link not the h3 in your code. So when you tried to show the h3, the a link was still hidden.