Is there a way to keep the 3rd div fixed

$(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