Search code examples
javascriptjqueryhtmlcssslidetoggle

SlideToggle Not Animating

I have two container divs containing boxes four to a row.

On click of a button I want the second div to slide up and hide or down and show.

However, when I click it now it only appears or disappears and doesn't animate the slide transition. Research shows that usually this is an issue of absolute positioning, but none of the elements are absolutely positioned.

Also if I apply the onclick listener to the first div it works fine. I recreated the issue in a js fiddle:

$('.more').click(function() {

  $('#group2').slideToggle(400);

})
html,
body {
  height: 100%;
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
}

#content-container {
  clear: both;
}

.group-containers a {
  background-color: blue;
  height: 200px;
  width: 23.5%;
  float: left;
  margin-top: 2%;
}

.group-containers a:not(:nth-child(4n)) {
  margin-right: 2%;
}

.boxes {
  background-color: blue !important;
  height: 200px;
  width: 100%;
  float: left;
}

.boxes:not(:nth-child(4n)) {
  margin-right: 2%;
}

.boxesTwo {
  background-color: red !important;
  height: 200px;
  width: 100%;
  float: left;
}

.boxesTwo:not(:nth-child(4n)) {
  margin-right: 2%;
}

.labels {
  background-color: blue;
  height: 50px;
  text-align: center;
  color: white;
  margin-top: 25%;
  padding-top: 5%;
  margin-left: 15%;
  margin-right: 15%;
}

.overflow-group {
  display: none;
}

.more {
  height: 30px;
  background-color: green;
  width: 100%;
  clear: both;
  margin-top: 2%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <section id="content-container">
    <section class="group-sections">
      <div class="group-containers" id="group1" style="display: block;">
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
      </div>

      <div class="group-containers overflow-group" id="group2" style="display: block;">
        <a href="">
          <div class="boxesTwo lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxesTwo lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxesTwo lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxesTwo lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
      </div>

      <div class="more">See more</div>
    </section>
  </section>
</div>

Solution

  • The problem lies within your float on .group-containers a. Here's an example with display: inline-block instead.

    $('.more').click(function() {

  $('#group2').slideToggle(400);

});
    html,
body {
  height: 100%;
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
}

#content-container {
  clear: both;
}

.group-containers a {
  background-color: blue;
  height: 200px;
  width: 22%;
  /*float: left;*/
  margin-top: 2%;
  display: inline-block;
}

.group-containers a:not(:nth-child(4n)) {
  margin-right: 2%;
}

.boxes {
  background-color: blue !important;
  height: 200px;
  width: 100%;
  float: left;
}

.boxes:not(:nth-child(4n)) {
  margin-right: 2%;
}

.boxesTwo {
  background-color: red !important;
  height: 200px;
  width: 100%;
  float: left;
}

.boxesTwo:not(:nth-child(4n)) {
  margin-right: 2%;
}

.labels {
  background-color: blue;
  height: 50px;
  text-align: center;
  color: white;
  margin-top: 25%;
  padding-top: 5%;
  margin-left: 15%;
  margin-right: 15%;
}

.overflow-group {
  display: none;
}

.more {
  height: 30px;
  background-color: green;
  width: 100%;
  clear: both;
  margin-top: 2%;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <section id="content-container">
    <section class="group-sections">
      <div class="group-containers" id="group1" style="display: block;">
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxes lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
      </div>

      <div class="group-containers overflow-group" id="group2" style="display: block;">
        <a href="">
          <div class="boxesTwo lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxesTwo lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxesTwo lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
        <a href="">
          <div class="boxesTwo lazy" style="background: url() no-repeat center">
            <div class="labels">label</div>
          </div>
        </a>
      </div>

      <div class="more">See more</div>
    </section>
  </section>
</div>