JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<div class="cbp-category-link-w">
	<a href="#" class="cbp-column-title nav-link cbp-category-title">Holztiger Figures</a>
	<ul class="cbp-links cbp-category-tree">
		<li><div class="cbp-category-link-w"><a href="#">Wildlife</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Farm Theme</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Woodland &amp; Meadow</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Plants</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Dinosaurs</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Sets, Boxes and Packs</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Sea Creatures</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Castle Characters</a></div></li>
		<li><div class="cbp-category-link-w"><a href="#">Nativity &amp; Christmas</a></div></li>
	</ul>
</div>

CSS

.cbp-category-link-w {
		display: block;
		width: 200px;
    background: #ccc;
	}
	.cbp-category-link-w ul{
		display: inline-block;
		width: 100;
		margin: 0;
		padding: 0;
    list-style: none;
	}
	.cbp-category-link-w ul li{
		
		float: left;
		width: 100%;
		list-style: none;
    color: #ff0;
	}
  .cbp-category-link-w ul li a{
    color: red;
	}

JavaScript

var more = jQuery('<div class="more">Show more</div>');
var less = jQuery('<div class="less">Show less</div>');


jQuery('.cbp-category-link-w ul').children('li').hide();
jQuery('.cbp-category-link-w ul').children('li:lt(2)').show();
jQuery('.cbp-category-link-w ul').append(more);


jQuery('.more').click(function(){
   jQuery('.cbp-category-link-w ul').children('li').show();
   jQuery('.cbp-category-link-w ul').append(less);
    return false;
});

jQuery('.less').click(function(){
   jQuery('.cbp-category-link-w ul').children('li').hide();
   jQuery('.cbp-category-link-w ul').children('li:lt(2)').show();
   jQuery('.cbp-category-link-w ul').append(less); 
    return false;
});