JSFiddle - React, Tailwind, and code Playground

by Amir Sharifian

HTML

<ul id="color_list">
  <li>black</li>
  <li>white</li>
  <li>red</li>
  <li>blue</li>
  <li>yellow</li>
  <li>browen</li>
  <li>pink</li>
  <li>orange</li>
</ul>
<button id="more" class="review_more1">+more...</button>
<button id="less" class="review_more2">-less...</button>

CSS

ul#color_list {
height: 96px;
overflow: hidden;
}
.review_more1{
	cursor: pointer;
	font-weight: bold;
	font-size: 20px;
	color: #2F96FF;
	&:hover{
		color: #2a83da;
	}
	
}
.review_more2{
	cursor: pointer;
	font-weight: bold;
	font-size: 20px;
	display: none;
	&:hover{
		color: #2a83da;	
	}
	
}

JavaScript

$("#more").click(function() {
    
      var el = $("#color_list"),
      curHeight = el.height(),
      autoHeight = el.css('height', 'auto').height();
      el.height(curHeight).animate({height: autoHeight}, 'fast');

    $("#more").removeClass("review_more1");
    $("#more").addClass("review_more2");

    $("#less").removeClass("review_more2");
    $("#less").addClass("review_more1");

});

$("#less").click(function() {

    $("#color_list").animate({height: 96}, 'fast');
    
    $("#less").removeClass("review_more1");
    $("#less").addClass("review_more2");
    
    $("#more").removeClass("review_more2");
    $("#more").addClass("review_more1");

});