JSFiddle - React, Tailwind, and code Playground

by Sukanya Halder

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li </ul>
    <br>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li </ul>
        <ul><li>Three</li>
        <li>Four</li>
        <li>Five</li </ul>

CSS

li {
    display:none;
}

JavaScript

$(document).ready(function () {
   // alert();
    ShowHide();

    function ShowHide() {
       // alert($("ul"));
        $("ul").each(function () {
            
            if ($(this).children("li").length >= 4) {
                AddDisplay(4,$(this));

            } else AddDisplay($(this).children("li").length,$(this));
        });
    }

    function AddDisplay(num,obj) {
        if (num != null && num != undefined && num <= 4) {
            for (var i = 1; i <= num; i++) {
               // alert(obj.children("li:eq(-" + i + ")").html());
                obj.children("li:eq(-" + i + ")").css("display", "block");
            }
        }
    }
});