Click More - Less HTML+JS+CSS

 

** CSS

.filter-list li:nth-child(n+11) {

    display: none;

}

.filter-list.show-all li {

    display: block !important;

}

** JS

<script type="text/javascript">

            

    $(document).on("click", ".moreless", function(e){

        e.stopPropagation();

        var parent = $(this).closest(".filter-section");

        var sublist = parent.find(".filter-list");

        var icon = $(this).find("i");

        if(sublist.hasClass("show-all")){

            sublist.removeClass("show-all");

            $(this).find("span").text("More");

            // icon xuống

            icon.removeClass("fa-angle-up").addClass("fa-angle-down");

        } else {

            sublist.addClass("show-all");

            $(this).find("span").text("Less");

            // icon lên

            icon.removeClass("fa-angle-down").addClass("fa-angle-up");

        }

    });

</script>

** HTML

echo'<div class="filter-section">

    <div class="filter-title">Danh Mục</div>

    <ul class="filter-list">';

        foreach ($data as $key => $value) {

            echo'<li>

                <a href="/'.mod_rewrite($value["title"]).'-'.$value["mid"].'-nsp">'.$value["title"].'</a>

            </li>';

        }

    echo'</ul>

    <button class="moreless toggle-btn"><span>More</span> <i class="ft-icon fa fa-angle-down"></i>

    </button>

</div>';