JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<div class="accordion subCategory">
    <div id="links">
        <a href="#">link 1</a>
        <a href="#">link 2</a>
        <a href="#">link 3</a>
        <a href="#">link 4</a>
        <a href="#">link 5</a>
        <a href="#">link 6</a>
        <a href="#">link 7</a>
        <a href="#">link 8</a>
        <a href="#">link 9</a>
        <a href="#">link 10</a>
        <a href="#">link 11</a>
        <a href="#">link 12</a>
    </div>

    <div class="show-all-less-cats">
        <p class="show-all-cats">Show All</p>
        <p class="show-less-cats cats-hide">Show Less</p>
    </div>
</div>

CSS

a {
    display: block;
}

p.cats-hide {
    display: none;
}

#links a:nth-child(n+11) {
    display: none;
}

.accordion.subCategory .show-all-less-cats p {
    color: #007095;
    font-size: 0.85em;
    font-weight: bold;
    padding-left: 1.25em;
    position: relative;
}

.accordion.subCategory .show-all-less-cats p:before {
    color: #f48120;
    font-family: FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 0;
    left: 0;
}

.accordion.subCategory .show-all-less-cats .show-less-cats:before {
    content: "\f068";
}

.accordion.subCategory .show-all-less-cats .show-all-cats:before {
    content: "\f067";
}

JavaScript

$(document).ready(function() {
    $(".show-all-less-cats p").on("click", function() {
        $(".show-all-less-cats p").removeClass("cats-hide");
        $(this).addClass("cats-hide");
        $("#links a:nth-child(n+11)").attr("style", $(this).hasClass("show-all-cats") ? "display: block" : "");
    });
});