Hello. There are several such blocks.

$(".btn_more1").click(function() { $(this).prev("div.ctn_more1").slideToggle("slow"); }); 
 .ctn_more1 { height: 40px; overflow: hidden; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ctn_more1">1</div> <button class="btn_more1">Подробнее</button></div> <div class="ctn_more1">2</div> <button class="btn_more1">Подробнее2</button></div>

Those. its maximum height is 40px, when you press the button it should open down to its full height. But it closes and opens only on these 40 px. How to make, that would fulfill on all height. Plus, the question is how to make it so that in the block the last line seemed to disappear slowly? And then the text is clearly broken, which is not very beautiful.

    2 answers 2

    Try something like:

     $(".btn_more1").click(function() { $(this).prev("div.ctn_more1").toggleClass('ctn_more2'); });

    and in the class ctn_more2 for example, specify the height of 300px (or another)

    • the only thing without animation looks so-so. But it can be added separately. - SoVerk

    Example: https://codepen.io/romkaa/pen/VyQPpv

    Just remove the altitude value altogether. If you use slideToggle, you don’t need it.

    At the expense of cutting the text, I would add another extra class, which I would make after the pseudo-element, where I would simply paint the text smoothly through transparency.

    Code

     .ctn_more1 { display: none; position: relative; overflow: hidden; padding: 5px 0 10px; } .ctn_more1::after { position: absolute; content: ''; width: 100%; height: 30px; bottom: 0; left: 0; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }