Изменение высоты родителя до высоты ребенка

Question

Я использую плагин jquery dotdotdot для создания «... Read More >>» после блока текста. Когда пользователь нажимает на ссылку ('read more >>'), div должен расширяться, чтобы весь текст был виден. Первая часть отлично работает, но я не могу понять вторую часть.

Это мой код:

<script type="text/javascript" language="javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" language="javascript" src="js/jquery.dotdotdot.min.js"></script> 
<script type="text/javascript" language="javascript"> 
     $(function() { 
      $('#dot3').dotdotdot({ 
       after: 'a#test' 

      }); 
     }); 
<style type="text/css" media="all"> 
     div.example { 
      padding: 0 0 150px 0; 
     } 
     div.example:after { 
      content: ''; 
      display: block; 
      clear: both; 
     } 
     div.r { 
      width: 275px; 
     } 
     div.box { 
      border: 1px solid #ccc; 
      height: 160px; 
      padding: 15px 20px 10px 20px; 
      overflow:visible; 
     } 
</style> 
<div class="example"> 
      <div class="r"> 
       <div class="box after" id="dot3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
        <a href="#" id="test" onClick="">Read more &raquo;</a></div> 
      </div> 
     </div> 

Answer 1

Просто позвоните разрушающего и изменить размер DIV. Попробуйте

$("#test").click(function() { 
    var div = $('#dot3'); 
    div.trigger('destroy'); 
    div.css("height", "auto"); 
}); 

Here is fiddle.