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{
		display:none;
		float: left;
		width: 100%;
		list-style: none;
    color: #ff0;
	}
  .cbp-category-link-w ul li a{
    color: red;
	}

JavaScript

$(document).ready(function () {
	
  var more = jQuery('<div class="more">Show more</div>');
	var less = jQuery('<div class="less">Show less</div>');
  
  jQuery('.cbp-category-link-w ul').append(more);
		
    size_li = $(".cbp-category-link-w ul li").size();
    x=2;
    $('.cbp-category-link-w ul li:lt('+x+')').show();
    $('.more').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('.cbp-category-link-w ul li:lt('+x+')').show();
        $('.cbp-category-link-w ul').append(less);
    		return false;
    });
    $('.less').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('.cbp-category-link-w ul li').not(':lt('+x+')').hide();
    });
});