There are 2 sidebars. Left / right, both fold / unfold. But the problem is that with the width of the wrapper <1500px slightly different conditions are met, namely:
My screen is 1280px - when I enter the site, only the left sidebar is deployed (that is, the right side is hidden at this resolution) ( by default (> 1500px), both sidebars are deployed ). When you try to expand the right one, the left one collapses and the right one opens. and vice versa.
Since js, I only gradually begin to study, sketched the mega cost option.
How to implement it more correctly and not a crutch?
$("#menu-toggle").click(function(){ $("#left-menu").toggleClass("menu-hidden"); $(".wide-mode").toggleClass("menu-hidden"); $(".wide-mode").toggleClass("menu-show"); }); $("#right-menu-toggle").click(function(){ $(".wide-mode").addClass("chat-hidden"); $(".wide-mode").toggleClass("chat-show"); }); $("#right-menu-show").click(function(){ $(".wide-mode").removeClass("chat-hidden"); $(".wide-mode").addClass("chat-show"); }); $(window).resize(function(){ var windowWidth = $(window).width(); if(windowWidth < 1500) { $("#right-menu-show").click(function(){ $("#left-menu").addClass("menu-hidden"); $(".wide-mode").addClass("menu-hidden"); $(".wide-mode").removeClass("menu-show"); }); $("#menu-toggle").click(function(){ $(".wide-mode").addClass("chat-hidden"); $(".wide-mode").removeClass("chat-show"); }); } else { } }); $(window).resize(function(){ var windowWidth = $(window).width(); if(windowWidth < 1500) { $(".wide-mode").addClass("menu-hidden"); $(".wide-mode").addClass("chat-hidden"); $("#left-menu").addClass("menu-hidden"); $(".wide-mode").removeClass("chat-show"); $(".wide-mode").removeClass("menu-show"); } else { $("#left-menu").removeClass("menu-hidden"); $(".wide-mode").removeClass("menu-hidden"); $(".wide-mode").removeClass("chat-hidden"); } }); 