JSFiddle - React, Tailwind, and code Playground

by Mirjalol97

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class='content'>
  <ul class="list" style="overflow: hidden;">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
    <li>Fifth item</li>
    <li>First item</li>
    <li>First item</li>
  </ul>
</div>

<a href="#close" class="button">Hide</a>

JavaScript

var ul = $('.content ul');
var height1 = $('.content ul').height();
$('.button').on('click', function() {
    if (ul.css('height') == '60px') {
      $(this).text('Hide');
      ul.animate({
        height: height1 + "px"
      }, 300);
    } else {
      $(this).text('Show');
      ul.animate({
        height: "60px"
      }, 300);
    }
  })
  //$('.button').trigger('click');