We Keep Coding

add and remove classes that toggle open and close full screen navigation

I'm currently working on a full screen navigation menu that opens when I click the hamburger icon. Right now I am able to toggle the navigation by adding a class called "open" that triggers when I click on the menu. But I am stuck when it comes to closing it. Could you review my code and let me know what I'm missing?
$(document).ready(function() {
$('#menu').on('click', function() {
$('.overlay').addClass('open');
$('#menu').removeClass('open-menu');
$('#menu').addClass('close-menu');
});
$('.#menu').on('click', function() {
$('.overlay').removeClass('open');
$('#menu').addClass('open-menu');
$('#menu').removeClass('close-menu');
});
});

use toogle function for this like
$( "#target" ).toggle(function() {
alert( "First handler for .toggle() called." );
}, function() {
alert( "Second handler for .toggle() called." );
});

Stopping propagation on multiple hover event

My home page contains multiple boxes.
On each boxes, when mouseover in or out , the title disappears and the content appears.
It works fine.
The problem is that when mouseovering more than one box on a short period of time, it is a mess.
$( ".views-field-wrapper" ).each(function(){
$( this ).hover(function() {
$( "#front_panel",this ).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
});
How can I stop the previous mouseover reaction when mouseovering another box?
EDIT :
My intial code: http://jsfiddle.net/tz3d6ct6/
Kumar's code that works perfectly with jquery > 1.6 (I must use jquery1.4) http://jsfiddle.net/hrkf5p7w/

Try to use stop() and no need to use loop to bind hover event,
$( ".views-field-wrapper" ).hover(function() { // no need to use each loop
$( "#front_panel",this ).stop(true).fadeOut(400);
$( "#back_panel",this ).delay(500).fadeIn(1000);
}, function(){
$( "#back_panel",this ).stop(true).fadeOut(400);
$( "#front_panel",this ).delay(500).fadeIn(1000);
});
Try it without using using delay() like,
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
$(".views-field-wrapper").hover(function () { // no need to use each loop
$("#front_panel", this).stop(true).fadeOut(400);
$("#back_panel", this).fadeIn(1000);
}, function () {
$("#back_panel", this).stop(true).fadeOut(400);
$("#front_panel", this).fadeIn(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='views-field-wrapper type-t nodetype-t'>
<div id='front_panel'>title</div>
<div style='display:none' id='back_panel'>teaser</div>
</div>

jquery slidetoggle how to set if mouse click other, close slidetoggle

I using jquery slidetoggle to show a DIV
but I need set if mouse click not in div.list go close this slideToggle
$( "#list_button" ).click(function() {
$( ".list" ).slideToggle( "fast" );
});
I only found if mouseout.... I cant find how to set if click any "anywhere on the page" to close this toggle
for testing : http://jsfiddle.net/sdgwbyv8/

$( "body" ).click(function( event ) {
if(
event.target.className!='list' && event.target.parentNode.parentNode.className!="list"
) {
$( ".list" ).slideToggle('fast');
}
});
Demo: http://jsfiddle.net/sdgwbyv8/9/ One possible solution, i guess there are better ones....

You can do it by event.stopPropagation():
$("#list_button").click(function (event) {
if ($(".list").is(":hidden")) {
event.stopPropagation();
$(".list").slideToggle("fast");
}
});
$('body').click(function () {
$(".list").hide();
});
$(".list").click(function (event) {
event.stopPropagation();
});
Working Fiddle

DIV - toggle up

I need help with div' showing up.
I know, that code:
$( "#Button" ).click(function() {
$('#leftDiv').toggle(2000);
});
will make my leftDiv dissappear (when I click Button), but what should I do to set my div default-hided(toggled down?) so that after I click Button, leftDiv should toggle up (appear)?

If you want the div hidden when the page loads, then .hide() it first:
$('#leftDiv').hide();
$( "#Button" ).click(function() {
$('#leftDiv').toggle(2000);
});

If you want the div to be hidden on load, you would do something like:
function load() {
document.getElementById("leftDiv").style.visibility="hidden";
}
<body onload="load"></body>
Would that not work?

var $leftDiv = $('#leftDiv');
var $button = $("#Button");
$leftDiv.hide();
$button.on('click', function() {
$leftDiv.toggle(2000);
});

jQuery/javascript - Highlight for a menu when user click on it

Hi
Suppose I have a menu like:
<ul>
<li>notebook</li>
<li>camera</li>
<li>phone</li>
</ul>
When I click on a menu, the menu will be highlighted, if click on another menu, this menu will be highlighted and other menu will return to original(no highlighted). Can someone give me some idea how to do it(create a listener for <li> or anything else)?
Thanks you

The most efficient way would be via .delegate(), like this:
$("ul").delegate("li", "click", function() {
$(this).addClass("active").siblings().removeClass("active");
});
Then just give it some styling to match, for example:
.active a { color: red; }
You can test it out here, if you want a click on an already-active <li> to make it inactive, then change .addClass() to .toggleClass(), like this.

You didn't provide a lot to go on, but assuming that's the only unordered list on the page...
<script type="text/javascript">
$( document ).ready( function() {
$( 'ul li' ).click( function() {
$( 'ul li' ).removeClass( 'highlight' );
$( this ).addClass( 'highlight' );
});
});
</script>
So when any li gets clicked, the 'highlight' class (assuming there is one that does the highlighting of which you speak) gets removed from all of the li elements. Then the one that triggered the click gets the highlight class.
Might be better to have the 'a' element actually trigger the jquery, now that I think about it.
<script type="text/javascript">
$( document ).ready( function() {
$( 'ul li a' ).click( function() {
$( 'ul li' ).removeClass( 'highlight' );
$( this ).parent( 'li' ).addClass( 'highlight' );
});
});
</script>
That's the best I can do given the information that you've provided.