JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    #foobar {
      min-height: 25px;
      background-image: url(http://i.imgur.com/9eTR2s.jpg)
    }
  </style>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
    var text = '    <li>lalalala la lala la la la lalalalallalalalal</li>    <li>lalalala la lala la la la lalalalallalalalal</li>    <li>lalalala la lala la la la lalalalallalalalal</li>    <li>lalalala la lala la la la lalalalallalalalal</li>    <li>lalalala la lala la la la lalalalallalalalal</li>    <li>lalalala la lala la la la lalalalallalalalal</li>';

    $(document).ready(function () {
      $('#clickme').click(function() {
        var currentMinHeight = $('#foobar').css('min-height')
        $('#foobar').animate(
                {
                  'min-height': '0',
                  height: '0'
                }, 500, function() {
                  $(this).html(text)
                })
                .animate({
                  height: '250'
                }, 500)
                .css('min-height', currentMinHeight)
      })
    })
  </script>
</head>
<body>
<p id="clickme">Click me !</p>
<ul id="foobar">
</ul>

</body>
</html>