JSFiddle - React, Tailwind, and code Playground

by kapilrc

HTML

<div class="tabInfo">
<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   <li>Four</li>
   <li>Five</li>
   <li>Six</li>
   <li>Seven</li>
   <li>Eight</li>
   <li>Nine</li>
</ul>
</div>

CSS

.infoLink a, .tabInfo a {
    color: #00AFF1;
    float: left;
    padding: 0 20px 0 0;
    text-decoration: none;
}

JavaScript

$(document).ready(function() {
    /* to toggle list after 5 */
    
    $('div.tabInfo ul li:gt(5)').hide().parent().append('<a class="more" href="#more">Show More</a>');   
    
    $('.more').live('click', function() {
        $(this).remove();
        $('div.tabInfo ul li').show().parent().append('<a class="lessLi" href="javascript:void(0)">Show Less</a>');   
    });
    
    
    $('.lessLi').live('click', function() {
        $(this).remove();
        $('div.tabInfo ul li:gt(5)').hide().parent().append('<a class="more" href="javascript:void(0)">Show More</a>');  
    });

    
});