JQuery slideToggle - div jump

Question

I have one problem. There is jQuery "more text" animated div (slideToggle) and text jumps are shown. I do not know why. Can someone 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

Answer 1

Just remove float:left from the range:

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

JSFiddle Demo

Answer 2

You can remove float: left , as Jacob Gray suggested, but you can also try adding overflow: hidden; to 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.com/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>