slideToggle() nicht in der mobilen Ansicht

Question

Ich versuche, eine div Expand Show auf ausgeblendeten Inhalt mit Hilfe von SlideToggle() zu machen. es funktioniert gut in der Desktop-Version, aber wenn ich es auf mobile Ansicht Größe ändern. Die Inhaltsfolien, aber die div Erweiterung nicht um den Inhalt anzuzeigen

`https://jsfiddle.net/freal0s/w02ctpem/` 

dies der HTML-

#our-team { 
    background-color: #f6f6f6; 
    color: #43484E; 
} 

#our-team h2 { 
    color: #43484E; 
    margin-bottom: 35px; 
} 

#our-team .team-members { 
    padding: 0; 
    margin-top: 55px; 
    display: block; 
    overflow: hidden 
} 

#our-team .btn-more { 
    border-radius: 6px; 
    font-size: 14px; 
    line-height: 1.33; 
    padding: 5px 15px; 
    background-color: #fff; 
    color: #43484e; 
    margin: 0; 
} 

#our-team .team-desc { 
    padding: 10px 0 0 0; 
    font-size: 14px; 
} 

#our-team .btn-more:hover { 
    background-color: #43484e; 
    color: #ffdd15; 
} 

#our-team .single-member { 
    min-height: 375px; 
} 

.single-member { 
    background-color: #ffdd15; 
    border: 1px solid #ffdd15; 
    padding: 25px; 
    text-align: center; 
    overflow: hidden; 
    margin: 10px; 
    border-radius: 10px; 
} 

.single-member img { 
    width: 100%; 
    border-radius: 50%; 
} 

.single-member h4, 
.single-member h5 { 
    text-align: center 
} 

die jQuery

$(document).ready(function() { 
    $("p.team-desc").hide(); 

    $(".btn-more").click(function() { 
     $(this).closest('.single-member').find('.team-desc').slideToggle(); 
    }); 
    }); 

<div id="our-team"> 
    <div class="row item active"> 
    <div class="col-sm-6 col-md-3"> </div> 
    <div class="col-sm-6 col-md-3"> 
     <div class="single-member"> <img src="https://via.placeholder.com/300x300" alt="team member" /> 
     <h4>Name 1</h4> 
     <h5>Chairman </h5> 
     <div class="btn btn-more">more</div> 
     <p class="team-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec mi in mauris aliquam elementum vitae ac libero. Proin in ornare enim. Mauris neque urna, consectetur a hendrerit ac, pulvinar ut leo. Nunc id tellus laoreet, rutrum risus vitae, 
      vestibulum tortor. Mauris semper hendrerit posuere. Maecenas vulputate</p> 
     </div> 
    </div> 
    <div class="col-sm-6 col-md-3"> 
     <div class="single-member"> <img src="https://via.placeholder.com/300x300" alt="team member" /> 
     <h4>Name 1</h4> 
     <h5>Chairman </h5> 
     <div class="btn btn-more">more</div> 
     <p class="team-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec mi in mauris aliquam elementum vitae ac libero. Proin in ornare enim. Mauris neque urna, consectetur a hendrerit ac, pulvinar ut leo. Nunc id tellus laoreet, rutrum risus vitae, 
      vestibulum tortor. Mauris semper hendrerit posuere. Maecenas vulputate</p> 
     </div> 
    </div> 
    <div class="col-sm-6 col-md-3"> </div> 
    </div> 
</div> 

die CSS ist Die Team-Desc div expandiert auf der Desktop-Version, aber wenn ich die Größe der Ansicht. Das Team-Desc Div wird nicht erweitert.

Answer 1

//responsive.css:22  
@media (max-width: 991px) and (min-width: 768px) 
.single-member { 
    height: 515px; // << here is your problem