I've got one problem. There is a jQuery "more text" animated div (slideToggle) and showed text jumps. I don't know why. Could somebody help me?

HTML:

<div class="slide-button two">
   <span>More</span>
   <div class="hidden">
      <p>hidden</p>
   </div>
 </div>

jQuery:

$(document).ready(function () {
    $('.hidden').hide();
    $('.slide-button').click(function () {
        $('.hidden').slideToggle('slow');
    });
});

ISSUE on jsfiddle

I've got one problem. There is a jQuery "more text" animated div (slideToggle) and showed text jumps. I don't know why. Could somebody help me?

HTML:

<div class="slide-button two">
   <span>More</span>
   <div class="hidden">
      <p>hidden</p>
   </div>
 </div>

jQuery:

$(document).ready(function () {
    $('.hidden').hide();
    $('.slide-button').click(function () {
        $('.hidden').slideToggle('slow');
    });
});

ISSUE on jsfiddle

• javascript
• jquery
• html
• css

2 Answers 2

Just remove float:left from the span:

.slide-button span {
  display: block;
  font-family: "Playfair Display";
  font-size: 20px;
  font-weight: 400;
  color: #da3c2b;
  width: 90%;
  margin: 0;
}

JSFiddle Demo

You can remove float: left as suggested by Jacob Gray, but you can also try adding overflow: hidden; to the class .slide-button .hidden

As an example:

$(document).ready(function() {
  $('.hidden').hide();
  $('.slide-button').click(function() {
    $('.hidden').slideToggle('slow');
  });
});

.slide-button {
  display: block;
  width: 94.230769%;
  -webkit-box-shadow: 0 0 3px rgba(166, 166, 166, 0.5);
  box-shadow: 0 0 3px rgba(166, 166, 166, 0.5);
  background-color: #f7f7f7;
  background: -webkit-linear-gradient(180deg, #f7f7f7 0%, #f2f2f2 100%);
  background: linear-gradient(180deg, #f7f7f7 0%, #f2f2f2 100%);
  -webkit-border-radius: 3px;
  border-radius: 3px;
  cursor: pointer;
  padding: 25px 0 0 30px;
  position: relative;
  margin-bottom: 30px;
  min-height: 57px;
  overflow: hidden;
}
.slide-button span {
  display: block;
  font-family: "Playfair Display";
  font-size: 20px;
  font-weight: 400;
  color: #da3c2b;
  float: left;
  width: 90%;
  margin: 0;
}
.slide-button:after {
  position: absolute;
  content: '';
  background: url(../imgs/arrow.png) no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
  top: 40px;
  right: 30px;
}
.slide-button:hover {
  background-color: #f7f7f7;
  background: -webkit-linear-gradient(0deg, #f7f7f7 0%, #f2f2f2 100%);
  background: linear-gradient(0deg, #f7f7f7 0%, #f2f2f2 100%);
}
.slide-button .hidden {
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
.slide-button .hidden p {
  padding: 25px 0 40px 0;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-button two">
  <span>More</span>
  <div class="hidden">
    <p>content jumps</p>
  </div>
</div>