JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rightBox">
    <div id="one" style="overflow:hidden;">
        <h3><a href="#" id="t1">Availability</a></h3><p id="a1"><a href="#" title="Slide Down"><img src="/img/arrow.png" alt="Arrow" /></a></p>
        <p>Sample text</p>        
                <p>Sample text</p>        
                <p>Sample text</p>        
                <p>Sample text</p>        
                <p>Sample text</p>                 <p>Sample text</p>        
                <p>Sample text</p>        
                <p>Sample text</p>        
                <span>More Sample text</span>        
    </div>
</div>

JavaScript

$('#one').css({"height": "22px", "background-color": "red"});

    $('#t1').click(function() {

      if ($('#one').hasClass("extended")) {
        $('#one').stop(true, true).animate({height: '22px'},500);
        $('#one').removeClass("extended");
        $('#a1').stop(true, true).animate({opacity: '1'},500);
      } else {
                  var height = 0;
        $(this).closest("div").children().each(function(){
           height += $(this).outerHeight(true);
        });
        $('#one').animate({height: height + 'px'},500);
        $('#one').addClass("extended");
        $('#a1').animate({opacity: '0'},300);
      }
});