Is there a way to keep the 3rd div fixed

by 
$(document).ready(function () {
  $("#btn2").click(function () {
    $("#div1").slideUp();
    $("#div2").slideUp("slow");
    $("#div3").slideUp(3000);
  });

  $("#btn1").click(function () {
    $("#div1").slideDown();
    $("#div2").slideDown("slow");
    $("#div3").slideDown(3000);
  });
});
h1 {
  text-align: center;
}

#btn1 {
  position: absolute;
  left: 60vw;
}

#btn2 {
  position: absolute;
  left: 20vw;
}

button {
  padding: 15px 60px;
}

#flex {
  display: flex;
  position: absolute;
  top: 30vh;
  justify-content: space-around;
  width: 99vw;
}

#flex > div {
  width: 30vw;
  border: 1px solid black;
  height: 30vh;
}

#div1 {
  background-color: blueviolet;
}

#div2 {
  background-color: salmon;
}

#div3 {
  background-color: greenyellow;
}

button:active,
button:visited {
  background-color: yellow;
}

.white {
  background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <script src="jquery.min.js"></script>
    <title>Assignment</title>
  </head>
  <body>
    <h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
    <button id="btn1">CLick to slideDown boxes</button>
    <button id="btn2">CLick to slideUp boxes</button>
    <div id="flex">
      <div id="div1"></div>
      <div id="div2"></div>
      <div id="div3"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Is there any way to make the 3rd div position fixed when i click slideUp button. The divs collaps when i do so. I want all of them to slide up and down in their position. I think its due to flexbox as it is centering the whole thing. I tried removing that but still it doesnt work.

Is there any way to make the 3rd div position fixed when i click slideUp button. The divs collaps when i do so. I want all of them to slide up and down in their position. I think its due to flexbox as it is centering the whole thing. I tried removing that but still it doesnt work.

17 thoughts on “Is there a way to keep the 3rd div fixed”

  1. Please try this once

    $(document).ready(function () {
  $("#btn2").click(function () {
    $("#div1").slideUp();
    $("#div2").slideUp("slow");
    $("#div3").slideUp(3000);
  });

  $("#btn1").click(function () {
    $("#div1").slideDown();
    $("#div2").slideDown("slow");
    $("#div3").slideDown(3000);
  });
});
    h1 {
  text-align: center;
}

#btn1 {
  position: absolute;
  left: 60vw;
}

#btn2 {
  position: absolute;
  left: 20vw;
}

button {
  padding: 15px 60px;
}

#flex {
  display: flex;
  position: absolute;
  top:200px;
  justify-content: space-around;
  width: 99vw;
}

#flex > div > div {
  width: 30vw;
  border: 1px solid black;
  height: 30vh;
}

#div1 {
  background-color: blueviolet;
}

#div2 {
  background-color: salmon;
}

#div3 {
  background-color: greenyellow;
}

button:active,
button:visited {
  background-color: yellow;
}

.white {
  background-color: white;
}
.wrapper{
width:33%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" />
    <script src="jquery.min.js"></script>
    <title>Assignment</title>
  </head>
  <body>
    <h1>Demonstrate slideUP() and slideDown() with different parameters.</h1>
    <button id="btn1">CLick to slideDown boxes</button>
    <button id="btn2">CLick to slideUp boxes</button>
    <div id="flex">
    <div class="wrapper">
     <div id="div1"></div>
    </div>
     <div class="wrapper">
      <div id="div2"></div>
    </div>
    <div class="wrapper">
     <div id="div3"></div>
    </div>  
    </div>
    <script src="script.js"></script>
  </body>
</html>
    Reply

Leave a Comment