jQuery animation of maxHeight

Question

私はdivの高さをアニメーション化しようとしているので、それは自動高さに拡大されます - これは可能ではないことを知っているので、maxHeightで試してみました。このバグはたくさんあります。なぜどんなアイデア？スニペットとjsFiddleが含まれています。汚いコードの

申し訳 https://jsfiddle.net/2d6ry1fL/1/

$(".seeMore").click(function(){ 
 
    var val = $(this).text(); 
 
    if (val == "Read more") { 
 
    $(this).parent().animate({maxHeight:"1000px"}); 
 
    $(this).text("Read less"); 
 
    $(this).siblings('.gradientBox').css('display','none'); 
 
} else { 
 
    $(this).parent().animate({maxHeight:"100px"}); 
 
    $(this).text("Read more"); 
 
    $(this).siblings('.gradientBox').css('display','block'); 
 
} 
 
    return false; 
 
    });

.inspArticle { 
 
    width: auto; 
 
    margin: 1%; 
 
    margin-bottom:2%; 
 
    border: 1px solid $tableBorder; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
     -ms-flex-direction: column; 
 
      flex-direction: column; 
 
    position: relative; 
 
    } 
 
    .more { 
 
    height: 160px; 
 
    overflow: hidden; 
 
} 
 
    .seeMore { 
 
    position: absolute; 
 
    right: 42px; 
 
    bottom: 12px; 
 
    width: 133px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<section class="inspArticle more"> 
 
     <section> 
 
     <article> 
 
      <h3 class="inspHeadline">How to use your new Brochure</h3> 
 
      <p class="date">21/09/17</p> 
 
      <p>We have just visited your shop and handed you our new brochure. The new Water Utility Range Brochure is presenting our competencies within water supply and wastewater and our product offerings for optimised water solutions.</p> 
 
      <p>At, we are meeting the challenges facing the water supply and wastewater industry head on. The Range Brochure tells how we design lifecycle costs into solutions to make life easier for everyone.</p> 
 
      <p>Use the brochure to inspire you costumers to make a different when choosing products for their work </p> 
 
      <button class="primaryAction">Find brochure</button> 
 
     </article> 
 
     </section> 
 
     <div class="gradientBox"></div> 
 
     <button class="secondaryAction seeMore">Read more</button> 
 
    </section> 
 

Answer 1

あなたがそれを使用して開いている場合、ブートストラップは非常に簡単にこれを行うことができます：

https://jsfiddle.net/AP__/pwxk9Ltp/3/

HTML：

の

<section id="inspArticle" class="collapse in"> 
    <section> 
    <img src="img/grundfosWaterUtilityRangeBrochure.jpg" alt="Grundfos Water Utility Range Brochure"> 
    <article> 
     <h3 class="inspHeadline">How to use your new Grundfos Brochure</h3> 
     <p class="date">21/09/17</p> 
     <p>We have just visited your shop and handed you our new Grundfos brochure. The new Grundfos Water Utility  Range Brochure is presenting our competencies within water supply and wastewater and our product offerings for  optimised water solutions.</p> 
     <p>At Grundfos, we are meeting the challenges facing the water supply and wastewater industry head on. The  Range Brochure tells how we design lifecycle costs into solutions to make life easier for everyone.</p> 
     <p>Use the brochure to inspire you costumers to make a different when choosing products for their work </p> 
     <button class="primaryAction">Find brochure</button> 
     </article> 
    </section> 
    <div class="gradientBox"></div> 
</section> 
<a class="secondaryAction" data-toggle='collapse' href='#inspArticle'>Read Less</a> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js" charset="utf-8"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

JS：

$('.collapse').on('shown.bs.collapse', function() { 
    $("a.secondaryAction").text('Read Less'); 
}).on('hidden.bs.collapse', function() { 
    $("a.secondaryAction").text('Read More'); 
}); 

はまた、私は正直に言うと、ブートストラップを使用しての考えを好まないブートストラップCSS