CSS JS Fixed position sidebar

Question

I have 2 blocks - one with fixed position and the other next to it. I would like the fixed block to increase in length after clicking the button, and the second block to decrease in size and to click everything again to return it to its original state. Fixed block will be sidebar menu, permanently glued.

Everything should happen at 100% width.

How to do it, but the important thing is that the width of the fixed block and the latter should be specified in pixels, not in percent.

Is this to be done?

jQuery(document).ready(function($) {
  jQuery(".btn").click(function() {
    var div1 = jQuery(".left");
    var div2 = jQuery(".right");

    if (div1.width() < 200) {
      div1.animate({
        width: "25%"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

      div2.animate({
        width: "75%"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });
    } else {
      div1.animate({
        width: "5%"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });
      div2.animate({
        width: "95%"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });
    }
  });
});

.container {
  width: 100%;
  margin: 0 auto;
}

.left {
  float: left;
  position: fixed;
  width: 5%;
  height: 100%;
  background: pink;
  z-index: 5;
}

.right {
  float: right;
  position: relative;
  width: 95%;
  height: 300px;
  background: green;
}

.content {
  float: left;
  position: relative;
  width: 100%;
  height: 100px;
  background: silver;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="left">
    <input type="button" value="click" class="btn">
  </div>
  <div class="right">
    <div class="content"> abc </div>
  </div>
</div>

Answer 1

Everything should happen at 100% width.

... in pixels, not in percent.

Are you sure that it's not the opposite? It's way more better to try to make yor css based on % rather that px or rem (unless it's required to do it in px)

In any case, I fixed your code, but in %, from now on you can play with px if that's the requirement:

jQuery(document).ready(function($) {

  jQuery(".btn").click(function() {

    var leftDiv = jQuery(".left");
    var rightDiv = jQuery(".right");

    console.log("leftDiv width: " + leftDiv.width() +
      " - " + "rightDiv width: " + rightDiv.width())
      
    var minWidthForRight = $('.container').width() - 300;
    var maxWidthForRight = $('.container').width() - 100;

    if (leftDiv.width() < 200) {


      leftDiv.animate({
        width: "300px",
        
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

      rightDiv.animate({
        width: minWidthForRight
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

    } else {

      leftDiv.animate({
        width: "100px"
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

      rightDiv.animate({
        width: maxWidthForRight
      }, {
        duration: 200,
        specialEasing: {
          width: "linear"
        }
      });

    }

  });

});

.container {
  width: 100%;
  margin: 0 auto;
}

.left {
  float: left;
  position: fixed;
  width: 150px;
  height: 300px;
  background: pink;
  z-index: 5;
}

.right {
  float: right;
  position: relative;
  width: 95%;
  height: 300px;
  background: green;
  resize: horizontal;
}

.content {
  float: left;
  position: relative;
  width: 100%;
  height: 100px;
  background: silver;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">

  <div class="left">
    <input type="button" value="click" class="btn">
  </div>

  <div class="right">
    <div class="content"> abc </div>
  </div>

</div>

EDIT

Yes, it is possible to keep the left side in px and the left side in %, not % itself but calculated in px based on screen resolution.

Basically you take the container width and "eliminate" the width that you specified in animation:

var minWidthForRight = $('.container').width() - 300;

The right side will be: 300 + (100% - 300 ) and same for left: 100 + (100% - 100 )