JSFiddle - React, Tailwind, and code Playground

HTML

<p id="clickme">Click me !</p>
<ul id="foobar">
</ul>

CSS

#foobar {
      min-height: 25px;
      background-image: url(http://i.imgur.com/9eTR2s.jpg)
    }

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: '100%'
                }, 500)
                .css('min-height', currentMinHeight)
      })
    })