CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Petras99
Petras99

Reputation: 45

How to move other elements on jQuery animation

I have a simple jQuery website, where there are four blocks, when you press a block, another block slides out of it. It all works, for the most part, however, i was wondering how i could get the block that slides out to move the other elements below it down.

$(document).ready(function() {

  var height = 145;
  var speed = 600;
  $("#one").animate({
    width: "100%",
    height: height
  }, speed, function() {
    $("#two").animate({
      width: "100%",
      height: height
    }, speed, function() {
      $("#three").animate({
        width: "100%",
        height: height
      }, speed, function() {
        $("#four").animate({
          width: "100%",
          height: height
        }, speed);
      });
    });
  });

  $("#one").click(function() {
    $(".dropDown").not("#oneS").slideUp();
    $("#oneS").slideToggle();

  });

  $("#two").click(function() {
    $(".dropDown").not("#twoS").slideUp();
    $("#twoS").slideToggle();
  });

  $("#three").click(function() {
    $(".dropDown").not("#threeS").slideUp();
    $("#threeS").slideToggle();
  });

  $("#four").click(function() {
    $(".dropDown").not("#fourS").slideUp();
    $("#fourS").slideToggle();
  });


});
@charset "utf-8";
 .selectors {
  position: relative;
  border-radius: 30px;
}
#one {
  background-color: blue;
  height: 400px;
  width: 100px;
  margin-bottom: 10px;
}
#two {
  background-color: red;
  height: 400px;
  width: 100px;
  margin-bottom: 10px;
}
#three {
  background-color: yellow;
  height: 400px;
  width: 100px;
  margin-bottom: 10px;
}
#four {
  background-color: green;
  height: 400px;
  width: 100px;
}
.dropDown {
  background-color: #E9E9E9;
  height: 300px;
  width: 100%;
  position: absolute;
  //overflow:auto;
  border-radius: 10px;
  z-index: 1;
}
#oneS {
  display: none;
  top: 150px;
}
#twoS {
  display: none;
  top: 150px;
}
#threeS {
  display: none;
  top: 150px;
}
#fourS {
  display: none;
  top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script type="text/javascript" src="jQuery.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled Document</title>
</head>

<body>

  <div id="one" class="selectors">
    <div id="oneS" class="dropDown"></div>
  </div>

  <div id="two" class="selectors">
    <div id="twoS" class="dropDown"></div>
  </div>

  <div id="three" class="selectors">
    <div id="threeS" class="dropDown"></div>
  </div>

  <div id="four" class="selectors">
    <div id="fourS" class="dropDown"></div>
  </div>

</body>

</html>

Four blocks: Four Blocks

Slid out block: Slid out block

As you can see when the block is slid out, it covers over the red and yellow block. Instead i would like the sliding block to move the red and yellow block down the page, and out from under the sliding block.

Upvotes: 1

Views: 75

Answers (1)

elzi
elzi

Reputation: 5672

There's a few things wrong.

The general issue is that you're fighting the natural behavior of the HTML since the .dropDown elements are children of the .selectors elements. You would get closer to your desired result if they were siblings.

Make them siblings and remove some troublesome CSS properties like position:absolute and top and you should get closer to your desired effect.

Here is a JSBin of a working demo: http://jsbin.com/titibununu/1/edit?html,css,js,output

Upvotes: 1

Related Questions