slideToggle（）がモバイルビューでエキスダンドしない

Question

divをslideToggle（）を使用して非表示のコンテンツに展開しようとしています。 デスクトップ版では問題なく動作していますが、モバイルビューでサイズを変更しても問題ありません。コンテンツのスライドが、divが、これは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> 

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 
} 

jqueryの

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

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

あるコンテンツ

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

を表示するために拡大されていませんteam-desc divが拡大していますデスクトップ版では、私はビューのサイズを変更するとき。 team-desc divは展開されていません。

Answer 1

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