JSFiddle - React, Tailwind, and code Playground

by anay1231

HTML

<div id="menu1">
  
<ul class="term-list">
<li class="term-item ">Item 1</li>
<li class="term-item ">Item 2</li>
<li class="term-item ">Item 3</li>
<li class="term-item ">Item 4</li>
<li class="term-item ">Item 1</li>
<li class="term-item ">Item 2</li>
<li class="term-item ">Item 3</li>
<li class="term-item ">Item 4</li>
</ul>
</div>
<div id="menu2">

<ul class="term-list">
<li class="term-item ">Item 1</li>
<li class="term-item ">Item 2</li>
<li class="term-item ">Item 3</li>
<li class="term-item ">Item 4</li>
</ul>
</div>

CSS

.term-list{ margin-bottom: 20px;}
li {
  display: none;
}

JavaScript

$('.term-list').each(function() {
    var $list = $(this);
    $list.after('<button class="more_add">More</button>')
   $list.find('.term-item:lt(2)').show();
});

$('.more_add').click(function() {
    var $btn = $(this)
    var $list = $(this);
    $list.after('<button class="more_less">More</button>')
   	$list.find('.term-item').show();
        
    $btn.text($btn.text() == 'More' ? 'Less' : 'More');    
});

$('.more_less').click(function() {
    var $btn = $(this)
    $btn.next().find('.term-item:lt(10)').slideToggle();    
    $btn.text($btn.text() == 'More' ? 'Less' : 'More');    
});