$(document).ready(function(){ $('#button-one').click(function () { $('#div-one').toggleClass('div-left-close').toggleClass('div-left-open'); $('#button-one').toggleClass('button-one-bg-close').toggleClass('button-one-bg-open'); }); }); $(document).ready(function(){ $('#button-two').click(function () { $('#div-two').toggleClass('div-right-close').toggleClass('div-right-open'); }); }); 
 #button-one, #button-two { display: block; width: 20px; height: 55px; } #button-two { color: #fff; } .button-one-bg-close { background: #ff0000; } .button-one-bg-open { background: #ff0; } #div-one, #div-two { position: fixed; top: 0; height: 100%; width: 250px; background: rgba(0, 0, 0, 0.88); margin-top: 50px; } .div-left-close { left: -250px; -webkit-transition: left 0.3s ease-in-out; -moz-transition: left 0.3s ease-in-out; -o-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out; } .div-left-open { left: 0px; -webkit-transition: left 0.3s ease-in-out; -moz-transition: left 0.3s ease-in-out; -o-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out; } .div-right-close { right: -250px; -webkit-transition: right 0.3s ease-in-out; -moz-transition: right 0.3s ease-in-out; -o-transition: right 0.3s ease-in-out; transition: right 0.3s ease-in-out; } .div-right-open { right: 0px; -webkit-transition: right 0.3s ease-in-out; -moz-transition: right 0.3s ease-in-out; -o-transition: right 0.3s ease-in-out; transition: right 0.3s ease-in-out; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <a id="button-one" class="button-one-bg-close" href="#"></a> <div id="div-one" class="div-left-close"> <a id="button-two" href="#">LINK</a> Other content </div> <div id="div-two" class="div-right-close"> Other content </div>

Here is the complete code. It is necessary that if both blocks are open (visible) and the first button is pressed, then both blocks are closed, not just the first one.

  • The code and the situation as a whole are not clear. Better show your HTML and specify how it should work. I can say for sure that your code needs to be written differently, and not easy to fix. And how to write is not clear, without html-code. You have complicated everything with codes and a bunch of classes. Everything needs to be done easier. - Ivan Pshenitsyn
  • Ideally, make the code a snippet. So the answer for a few minutes already get. - Ivan Pshenitsyn
  • @IvanPshenitsyn have nothing to show as if. I will try to explain what you need. - Aaron
  • it is necessary not to explain, but at least to see the html-code. The structure is not clear. And in general, I re-read 10 times and so until the end I did not understand what and when it opens and what and when it closes and how many blocks there are at all. - Ivan Pshenitsyn
  • @IvanPshenitsyn There are two blocks and two buttons. One button is in the menu - you press and the first block appears. Inside the first block is a button from the second block. When you press the second button, the second block opens. When pressed again they close. But you need to make sure that when you press the first button, both blocks are closed (if the second is in the open state). How I open / close - blocks with position fixed and left and right -250px (this is the width of the window). When you click on the button, the class at which left and right = 0px changes - Aaron

1 answer 1

Specifically, the answer to the question consisted of one line. This seemed to me a little and I went further: I optimized the class structure a bit and got rid of some extra js after that.

Why give an element two classes for opening and closing, if you can do with one: when it is - the element is open, when not - the default styles, the element is closed.

 $(document).ready(function(){ var $divOne = $('#div-one'); var $divTwo = $('#div-two'); $('#button-one').click(function () { $divOne.toggleClass('open'); $divTwo.removeClass('open'); $('#button-one').toggleClass('button-one-bg-close button-one-bg-open'); }); $('#button-two').click(function () { $divTwo.toggleClass('open'); }); }); 
 #button-one, #button-two { display: block; width: 20px; height: 55px; } #button-two { color: #fff; } .button-one-bg-close { background: #ff0000; } .button-one-bg-open { background: #ff0; } .block { position: fixed; top: 0; height: 100%; width: 250px; background: rgba(0, 0, 0, 0.88); margin-top: 50px; } .block-left{ left: -250px; -webkit-transition: left 0.3s ease-in-out; -moz-transition: left 0.3s ease-in-out; -o-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out; } .block-right{ right: -250px; -webkit-transition: right 0.3s ease-in-out; -moz-transition: right 0.3s ease-in-out; -o-transition: right 0.3s ease-in-out; transition: right 0.3s ease-in-out; } .block-left.open{ left: 0; } .block-right.open{ right: 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <a id="button-one" class="button-one-bg-close" href="#"></a> <div id="div-one" class="block block-left"> <a id="button-two" href="#">LINK</a> Other content </div> <div id="div-two" class="block block-right"> Other content </div>

  • one
    toggleClass can accept a list of classes separated by a space, and in principle, you can remove the check if($divTwo.hasClass('open')) - Grundy
  • @Grundy really. thank. - Ivan Pshenitsyn
  • @IvanPshenitsyn thank you very much) Grundy, thank you for editing, removed this line) - Aaron