JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "OffersContainer">
    <div class='pan-box'>1</div>
    <div class='pan-box'>2</div>
    <div class='pan-box'>3</div>
	
    <div class='pan-box'>4</div>
    <div class='pan-box'>5</div>
    <div class='pan-box'>6</div>
	
    <div class='pan-box'>7</div>
    <div class='pan-box'>8</div>
    <div class='pan-box'>9</div>
	
    <div class='pan-box'>a</div>
    <div class='pan-box'>b</div>
    <div class='pan-box'>c</div>
</div>
<a href="javascript:void(0)" id="more">Show more....</a>
<a href="javascript:void(0)" id="less">Show less....</a>

CSS

#more,#less,.hide{display:none;}

JavaScript

$(function () {
                   display();
				$('#more').on('click',function(){
					$(".pan-box").removeClass('hide');
					$(this).hide();
					$('#less').show();
				});
				$('#less').on('click',function(){
					display();
					$(this).hide();
					$('#more').show();
				});
				
			});
			
	function display(){
		 $(".pan-box").each(function (i,v) {
							if(i>=0){
								$(this).nextAll().addClass( "hide");
							}	
							$('#more').show();                       
                    });
	}