There is a block that changes the number of characters by clicking, the size of the block changes accordingly, but does not want to work transition, how to fix it?

$(function() { $(".parent .text p").each(function() { $(this).data('full', $(this).html()); $(this).html($(this).html().substr(0, 70)); }); $(".parent .rmore").click(function() { $(this).parents(".parent").toggleClass("active"); $(this).toggleClass("act"); if ($(this).is(".act")) { $(this).html("cвернуть"); $(this).siblings('.text').find('p').html($(this).siblings('.text').find('p').data('full')); } else { $(this).html("подробнее..."); $(this).siblings('.text').find('p').html($(this).siblings('.text').find('p').html().substr(0, 70)); } }); }); 
  .rmore { display: inline-block; position: relative; padding: 5px; background: #F8BBD0; cursor: pointer; } .parent { display: block; position: relative; background: #F1F1F1; padding: 15px; margin: 15px; transition: 700ms; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="text"> <p class="text-justify"> Товарищи! дальнейшее развитие различных форм деятельности влечет за собой процесс внедрения и модернизации дальнейших направлений развития. Идейные соображения высшего порядка, а также реализация намеченных плановых заданий представляет собой интересный эксперимент проверки новых предложений. Значимость этих проблем настолько очевидна, что новая модель организационной деятельности представляет собой интересный эксперимент проверки систем массового участия. Не следует, однако забывать, что сложившаяся структура организации способствует подготовки и реализации позиций, занимаемых участниками в отношении поставленных задач. </p> </div> <div class="rmore">подробнее...</div> </div> <div class="parent"> <div class="text"> <p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat possimus voluptas officiis est odio porro corporis reiciendis consequuntur laboriosam ad quae numquam impedit, a animi, consectetur inventore minus eveniet nam! </p> </div> <div class="rmore">подробнее...</div> </div>

    1 answer 1

     $(function() { var h = '20px'; $(".parent .text p").each(function() { var that = $(this); that.data('h', that.height()); that.height(h); }); $(".parent .rmore").click(function() { var that = $(this); that.parents(".parent").toggleClass("active"); that.toggleClass("act"); if (that.is(".act")) { that.html("cвернуть"); that.siblings('.text').find('p').animate({ height: that.siblings('.text').find('p').data('h') }, 200); } else { that.html("подробнее..."); that.siblings('.text').find('p').animate({ height: h }, 200); } }); }); 
     .rmore { display: inline-block; position: relative; padding: 5px; background: #F8BBD0; cursor: pointer; } .parent { display: block; position: relative; background: #F1F1F1; padding: 15px; margin: 15px; transition: 700ms; } .parent > .text > p { overflow: hidden; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="text"> <p class="text-justify"> Товарищи! дальнейшее развитие различных форм деятельности влечет за собой процесс внедрения и модернизации дальнейших направлений развития. Идейные соображения высшего порядка, а также реализация намеченных плановых заданий представляет собой интересный эксперимент проверки новых предложений. Значимость этих проблем настолько очевидна, что новая модель организационной деятельности представляет собой интересный эксперимент проверки систем массового участия. Не следует, однако забывать, что сложившаяся структура организации способствует подготовки и реализации позиций, занимаемых участниками в отношении поставленных задач.</p> </div> <div class="rmore">подробнее...</div> </div> <div class="parent"> <div class="text"> <p class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat possimus voluptas officiis est odio porro corporis reiciendis consequuntur laboriosam ad quae numquam impedit, a animi, consectetur inventore minus eveniet nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, architecto, est. Repellat ullam placeat, suscipit cupiditate inventore quis nostrum nemo molestiae nam, et, odit labore laudantium obcaecati aspernatur veritatis voluptatum?</p> </div> <div class="rmore">подробнее...</div> </div>

    • It seems there is no normal option, because the line spacing can be different, and even in the line there can be a different font size, and that is good for one block 20 pixels, the cropping curve is for another block. Look, the active class is attached to the parent, and I could write this: .parent p{ height: 20px; transition: 1s} .parent.active p{ height: auto} .parent p{ height: 20px; transition: 1s} .parent.active p{ height: auto} . and that would work too - Evgeni Shevtsov
    • Initially, I myself thought this option was used as a simpler one, but it turned out to be non-universal ... You cannot cut the text with the help of css - Yevgeny Shevtsov