slideToggle() ne s'expanse pas dans la vue mobile

Question

J'essaye de faire un div développer le show au contenu caché en utilisant slideToggle(). cela fonctionne très bien dans la version de bureau, mais quand je le redimensionner à la vue mobile. Les diapositives de contenu, mais le div ne se développe pas à afficher le contenu

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

c'est le html

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

le css

#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 
} 

le jquery

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

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

l'équipe-desc div est en expansion sur la version de bureau mais quand je redimensionne la vue. l'équipe desc desc n'est pas en expansion.

Answer 1

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