Two Divs Dock And Un-dock

I have a container box and a gray box, which is hidden from right side. I also have 2 buttons. When one of them is clicked, the gray box will show up and will push the container b

Solution 1:

Since the class manipulation on $grayBox is dependent on state, it is not always a direct "toggle". For example, clicking a button might turn on the class, but clicking another button won't always turn it off. So the toggling of col1 col2 can get out of sync with the state of $graybox.

I suggest using the state variable to change the width of .container. Also, instead of toggling two classes (col1 and col2), I suggest only toggling one class that overrides the default style.

Below, I set the default width for .container to 100%. Toggling the col2 class changes the width to calc(100% - 120px).

var $grayBox = $('.gray-box');
var $container = $('.container');

$('.clickMe').on('click', function() {

  // get text of clicked button and box.var myText = $(this).text();
  var boxText = $grayBox.text();

  // "true" if text differs OR box is hidden. otherwise "false".var state = myText != boxText || $grayBox.not('.dock');

  // update the box text and state.
  $grayBox.text(myText).toggleClass('dock', state);
  $container.toggleClass('col2', state);

});

.gray-box {
  position: fixed;
  margin-right: -120px;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 100px;
  background-color: gray;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  -o-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
}

.dock {
  margin-right: 0;
}

.container {
  border: 1px solid red;
  height: 400px;
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  -o-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
  width: 100%;
}

.col2 {
  width: calc(100% - 120px);
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="container"><p><buttonclass='clickMe'>Button 1</button></p><p><buttonclass='clickMe'>Button 2</button></p></div><divclass="gray-box">My box</div>

---

Edit

Here's an experiment using a flexbox layout:

var $sideNav = $('#sideNav');

$('.navToggle').on('click', function() {

  // get text of clicked button and box.var btnText = $(this).text();
  var navText = $sideNav.text();

  // "true" if text differs OR box is hidden. otherwise "false".var state = btnText != navText || $sideNav.not('.open');

  // update the box text and state.
  $sideNav.text(btnText).toggleClass('open', state);

});

#container {
  display: flex;
}

#buttons {
  border: 1px solid red;
  flex: 110;
}

#sideNav {
  height: 100px;
  background-color: gray;
  transition: all 0.25s ease-in-out 0s;
  flex: 000;
  overflow: hidden;
}

#sideNav.open {
  flex-basis: 100px;
  margin-left: 20px;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divid="container"><divid="buttons"><p><buttonclass='navToggle'>Button 1</button></p><p><buttonclass='navToggle'>Button 2</button></p></div><divid="sideNav">My box</div></div>