JSFiddle - React, Tailwind, and code Playground

HTML

<div id="arrow">▲ (view less)</div>
<div id="main">
       <div id="content1">text from #content1</div>
       <div id="content2">text from #content2</div>
       <div id="content3">text from #content3</div>
       <div id="content4">text from #content4</div>
</div>
<div id="toggle_view">view more</div>

CSS

#main {overflow-y:hidden;height:100px;position:relative}
#arrow {cursor: pointer;}
#toggle_view{ cursor: pointer;}
.inactive { color: gray; cursor: none; }

JavaScript

var heightOfMain = $('#main').height();
var heightOfContent1 = $('#content1').height();
var differenceInHeight = heightOfMain - heightOfContent1;

$('#arrow').click(function() {
 
    $('#main').animate({
        height: heightOfContent1 
    });  
     $(this).addClass('inactive');
     $('#toggle_view').removeClass('inactive');
});

$('#toggle_view').click(function() {
 
    $('#main').animate({
        height: differenceInHeight 
    });  
        $(this).addClass('inactive');
        $('#arrow').removeClass('inactive');
   
});