JSFiddle - React, Tailwind, and code Playground

by Abhay Singh

HTML

<ul>
<li class="nav_accordian">1</li>
<li class="nav_accordian">2</li>
<li class="nav_accordian">3</li>
<li class="nav_accordian">4</li>
<li class="nav_accordian">5</li>
<li class="nav_accordian">6</li>
<li class="nav_accordian">7</li>
<li class="nav_accordian">8</li>
<li class="nav_accordian">9</li>
<li class="nav_accordian">10</li>
<li class="nav_accordian">11</li>
<li class="nav_accordian">12</li>
</ul>

JavaScript

$('.nav_accordian').each(function(){
    var max = 6
    if ($(this).find('li').length > max) {
        $(this).find('li:gt('+max+')').hide().end().append('<li class="sub_accordian"><span class="show_more">(see more)</span></li>');
        $('.sub_accordian').click( function(){
            $(this).siblings(':gt('+max+')').toggle();
            if ( $('.show_more').length ) {
                $(this).html('<span class="show_less">(see less)</span>');
            } else {
                $(this).html('<span class="show_more">(see more)</span>');
            };
        });
    };
});