Develop Reference

jQuery - Hide a particular div until another is clicked and hide that div again when div is hovered off

Here is what I am trying to do. I have a button (#facebook-button) that when clicked will show the contents of a div (#facebook). Now I want it so when the mouse is not on top (hover) of the div #facebook that it then hides the div #facebook.
Here is what I have so far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
Any suggestions?

You can use jQuery's on mouseleave event, that event is fired when the mouse leaves the area.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide().on('mouseleave', function() {
jQuery('#facebook').hide();
});
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>

You can try some thing like this.
CSS
div { display: none; }
HTML
<a id="hover" href="#">Show</a>
<div id="div">Contents</div>
JS
$('#hover')
.mouseleave(function() {
$('#div').hide();
})
.click(function(e) {
e.preventDefault();
$('#div').show();
});

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
$('#facebook').on('mouseenter', function() {
// do something or remove that part to just leave mouseleave
}).on('mouseleave', function(){
$('#facebook').hide();
});
});
});
</script>
Basically after showing the div, we will just spot when his mouse is leaving the #facebook div to hide it.
You could also optimize the code and put $('#facebook') in a variable considering the amount of time you re use it. Saves you calling jquery more times than actually needed.

Try this Demo.
$('.fbContent').hide();
$('button').hover(
function() {
$('.fbContent').show();
},
function() {
$('.fbContent').hide();
}
)

Multiple buttons with the same #id to do the same function?

JS beginner, sorry
How can could I make it so that every button that has the id "#popit" to open the same popup box?
I'm using bPopup
With this code there is only one button on the site which does open the popup
;(function($) {
$(function() {
$('#my-button').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
http://jsfiddle.net/yg5so25s/ - there are 3 buttons with the same id, but only the first one opens the popup box, anyway I could make it so that every single button to open the same popupbox?

id must be unique, you need to use class instead:
<button class="my-button">POP IT UP</button>
then you can use . to target elements by class name:
;(function($) {
$(function() {
$('.my-button').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
Updated Fiddle

use common class for all buttons
$('.commonClass').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup();
});
DEMO

Make toggle open only the actively clicked button, not all toggles

Right now I've got a toggle that when you click it opens every toggle that is named 'content'. How can I make it so that the toggles are opened individually?
Fiddle: http://jsfiddle.net/4N6xj/embedded/result/
$(document).ready(function(){
var $content = $(".content").hide();
$(".toggle").on("click", function(e){
$content.slideToggle(200);
});
});

Target the next() .content element from the clicked .toggle
$(document).ready(function(){
$(".content").hide();
$(".toggle").on("click", function(e){
$(this).next('.content').slideToggle(200);
});
});
FIDDLE

JQuery Toggle...one click to open - double to close

I created a mobile menu with a toggle switch.
When I click on the div "dropdown-menu" it opens.
When I click again it closes. But i want it to open with one click and to close with double click.
What do I need to add to my code??
$('.dropdown-menu').click(function() {
$('.dropdown-menu').not(this).children('ul').slideUp("slow");
$(this).children('ul').slideToggle("slow");}
);
$('.dropdown-menu').blur(function() {
$('.dropdown-inside').hide('slow', function() {
});
});

Try to use dblclick,
$('.dropdown-menu').click(function() {
$('.dropdown-menu').children('ul').slideUp("slow");// slideUp all drop-downs
$(this).children('ul').slideDown("slow");// use slideDown instead slideToggle
});
$('.dropdown-menu').dblclick(function() {
$(this).children('ul').slideUp("slow");
});
To prevent sliding after clicking once try this,
$('.dropdown-menu').click(function() {
if( !$(this).children('ul').is(':visible')) {// slide, if ul is not visible
$('.dropdown-menu').children('ul').slideUp("slow");
$(this).children('ul').slideDown("slow");
}
});

How to hide div when Textbox is focused?

I have a sidebar that is acting fine until i click on body.
Happening in sidebar
On click sidebar comes out and on mouseout it goes hidden.
when input box inside sidebar is focused then it is should not hide.
when input is not focused it follows step 1 nicely.
What i want-
When input is focused inside sidebar and at the same time when it is focused out because of body's input box focus then this sidebar should hide or on body click it should be hidden on action.
jQuery-
$(function(){
$('.sidebar-alert').on('click',function(){
$(this).animate({left:0},200);
event.stopPropagation();
});
$('.sidebar-alert').on('mouseleave ',function(){
if($(".focused-input").is(":focus"))
{
$('.sidebar-alert').show();
}
else
{
$('.sidebar-alert').animate({left:-295},200);
}
});
});
I am not able to bind mouseover and click for hiding sidebar.
JS fiddle
Updated fiddle

You can add the blur event for the input. That will take care of the issue that you have
$(".focused-input").on('blur', function() {
$('.sidebar-alert').animate({
left: -295
}, 200);
});
Check Fiddle

You can add one more event and selector in this part of code snippet like this:
$('.sidebar-alert, .focused-input').on('mouseleave focusout', function () {
if ($(".focused-input").is(":focus")) {
$('.sidebar-alert').show();
} else {
$('.sidebar-alert').animate({
left: -295
}, 200);
}
});