javascript - Closing an active div when clicking a secondary button -

javascript - Closing an active div when clicking a secondary button -

i having issues in closing active div in site. when click menu see menu panel slide left of screen. of way close click x button. have ability when click footer div slide bottom. works, problem having when menu open , click footer div cover menu instead of closing menu. same goes other way around, when footer open , click menu open instead of closing footer.

i 1 div open while closing other open div. how go doing this? here js , total code of site http://jsfiddle.net/8en2d/21/

$(function(){ window.status=0; $('#menu').click(function(){ if(window.status==0){ $('#slidingmenu').stop().animate({left:'0px'},500); window.status=1; $('body, html').css('overflow','hidden'); } else{ $('#slidingmenu').stop().animate({left:'-100%'},500); window.status=0; $('body, html').css('overflow-y','scroll'); } }); }) /* 1. footer slideup ----------------------------------------------------------------------------------------------- ===============================================================================================*/ //close menu when click footer $('#more').click(function () { var open = $('header').is('.open'); $('#dropfooter')['slide' + (open ? 'up' : 'down')](400); $('header').animate({ bottom: (open ? '-' : '+') + '=200' }, 400, function () { $('header').toggleclass('open'); }); }); $('#menu').click(function () { if ($('').is('.open')) { $('') .removeclass('open') .animate({ 'bottom': "-=200" }, function () { var $footer = $('.activetoggle'); if ($footer.length) $footer .toggleclass('activetoggle footerbutton') .text('footer'); }); $('footer').slideup(400); } }); $('.footerbutton').click(function () {// alter wording 1 time pressed var $this = $(this); $this.toggleclass('footerbutton'); if ($this.hasclass('footerbutton')) { $this.text('footer'); } else { $this.text('close'); } $(this).toggleclass('activetoggle'); }); $(window).resize(function(){ //check when window resize if($(window).width() < 780){ // check when window width less 780 if ($('header').is('.open')) { $('header') .removeclass('open') .animate({ 'bottom': "-=200" }); $footer = $('.activetoggle'); if ($footer.length) { $footer.toggleclass('activetoggle footerbutton').text('footer'); } $('#dropfooter').slidetoggle(400); } } });

i able tweak jquery bit create work. see jsfiddle here. below have set 2 main functions modified.

$('#menu').click(function () { //new jquery if ($('header').is('.open')) { var open = $('header').is('.open'); $('#dropfooter')['slide' + (open ? 'up' : 'down')](400); $('header').animate({ bottom: (open ? '-' : '+') + '=200' }, 400, function () { $('header').removeclass('open'); }); if ($('.navfooter button').hasclass('activetoggle')) { $('.navfooter button').removeclass('activetoggle').addclass('footerbutton').text('footer'); } } //back exisitng code if (window.status == 0) { $('#slidingmenu').stop().animate({ left: '0px' }, 500); window.status = 1; $('body, html').css('overflow', 'hidden'); $('#slidingmenu').addclass('open'); } else { $('#slidingmenu').stop().animate({ left: '-100%' }, 500); window.status = 0; $('body, html').css('overflow-y', 'scroll'); $('#slidingmenu').removeclass('open'); } }); $('#more').click(function () { //new jquery if ($('#slidingmenu').is('.open')) { $('#slidingmenu').stop().animate({ left: '-100%' }, 500); window.status = 0; $('body, html').css('overflow-y', 'scroll'); $('#slidingmenu').removeclass('open'); } //back existing code var open = $('header').is('.open'); $('#dropfooter')['slide' + (open ? 'up' : 'down')](400); $('header').animate({ bottom: (open ? '-' : '+') + '=200' }, 400, function () { $('header').toggleclass('open'); }); });

the list of issues contributed problem pretty long , still have extraneous code in fiddle still unnecessary.

multiple .click() functions - of code click event of element should in 1 function missing or wrong jquery selectors - in 1 area found $('') lacked notification class menu open (you had implemented footer (which called header)

javascript jquery html css