Velimir Lazarevic Velimir Lazarevic - 3 months ago 14
CSS Question

Need to change position of element on slideToggle



$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});

.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second {
position: absolute;
bottom: 0%;
height: 30px;
background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second">
<p>other content</p>
</div>
</div>





Please check this fiddle
https://jsfiddle.net/6d1t5jr8/

I need help to make .second div to
.slideToggle
from bottom border of
.first
div.

Answer

The problem:

Because of the bottom:0 in that way, the the height of the .second div start from the bottom.

The solution:

Try to wrap the .second with wrapper. So the slide animation will start from the top.

Like this:

jQuery(document).ready(function () {
  $("button.filters").click(function(){
    $("div.second").slideToggle("slow");
  });
});
.main {
  position: relative;
  display:block;
  height: 320px;
  color: #fff;
  background-color: grey;
}
.first {
  position: absolute;
  bottom: 15%;
  height: 70px;
  background-color: white;
}
.second-wrapper {
  position: absolute;
  bottom: 0%;
  height: 30px;
}

.second {
  display:none;
  background-color: green;
}

.second p {
  margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="main">
  <div class="first">
    <p>some content</p>
    <button class="filters">filters</button>
  </div>
  <div class="second-wrapper">
    <div class="second">
      <p>other content</p>
    </div>
  </div>
</div>