jQuery slideToggle - div springt

Question

Ich habe ein Problem. Es gibt eine jQuery "mehr Text" animierte div (slideToggle) und zeigte Textsprünge. Ich weiß nicht warum. Könnte mir jemand helfen?

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

Entfernen Sie einfach float:left aus der Spanne:

.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

Sie können float: left entfernen, wie von Jacob Grey vorgeschlagen, aber Sie können auch versuchen, .slide-button .hidden

Als Beispiel overflow: hidden; zur Klasse hinzufügen:

$(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>