JSFiddle - React, Tailwind, and code Playground
HTML
<div id="resize01">
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
<a href="#">Test links</a>
</div>
<a href="#" id="viewmore">+ View more</a>
<a href="#" id="viewless">- View less</a>
CSS
a {display:block;line-height:1em;}
#resize01 {height:190px;overflow:hidden;background:#eee;}
#viewmore, #viewless {
margin:5px 0 0 0;
padding:3px 5px;
background:#598296;
color:#fff;
width:90px;
display:inline-block;
text-decoration:none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
JavaScript
$('#viewless').hide();
$('#viewmore').click(function(){
var el = $('#resize01'),
curHeight = el.height(),
autoHeight = el.css('height', 'auto').height();
el.height(curHeight).animate({height: autoHeight}, 500);
$('#viewmore').toggle();
$('#viewless').toggle();
});
$('#viewless').click(function(){
$('#resize01').animate({height: '190'}, 500);
$('#viewmore').toggle();
$('#viewless').toggle();
});