Как скрывать/раскрывать динамические категории?
 

Здравствуйте.
Есть меню категорий в которое динамически создаются и выводятся категории.
Картинка 2019-10-11_122819.jpg
Внизу меню есть кнопка More categories по которой если кликнуть, то выводятся скрытые категории. Но проблема в том, что это работает если категории статичны просто обычный html. В коде это так выглядит

<!-- CATEGORY-MENU-LIST START -->
<div class="left-category-menu hidden-sm hidden-xs">
    <div class="left-product-cat">
        <div class="category-heading">
            <h2>categories</h2>
        </div>
        <div class="category-menu-list">
            <ul class="root">
                {% recursetree nodes %}
                    <!-- Single menu start -->
                    <li class="arrow-plus">
                        <a href="{% url 'shop:catlinks' node.slug %}">{{ node.name }}</a>
                        <!--  MEGA MENU START -->
                        {% if not node.is_leaf_node %}
                            <div class="cat-left-drop-menu">
                                {% for child in node.children.all %}
                                    <div class="cat-left-drop-menu-left">
                                        <a class="menu-item-heading" href="{% url 'shop:catlist' child.slug %}">
                                            {{ child.name }}&nbsp;({{ child.subcategory_items_count }})
                                        </a>
                                        <ul class="children">
                                            {% recursetree child.children.all %}
                                                <li>
                                                    <a href="{% url 'shop:shop-list' node.slug %}">
                                                        {{ node.name }}&nbsp;({{ node.product_items_count }})
                                                    </a>
                                                </li>
                                            {% endrecursetree %}
                                        </ul>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endif %}
                        <!-- MEGA MENU END -->
                    </li>
                    <!-- Single menu end -->
                {% endrecursetree %}

                <!-- MENU ACCORDION START -->
                <li class=" rx-child">
                    <a href="shop.html">Каталог</a>
                </li>
                <li class=" rx-child">
                    <a href="shop.html">Books</a>
                </li>
                <li class=" rx-parent">
                    <a class="rx-default">
                        More categories <span class="cat-thumb  fa fa-plus"></span>
                    </a>
                    <a class="rx-show">
                        close menu <span class="cat-thumb  fa fa-minus"></span>
                    </a>
                </li>
                <!-- MENU ACCORDION END -->
            </ul>
        </div>
    </div>
</div>
<!-- END CATEGORY-MENU-LIST -->

Подскажите, как сделать, что была возможность выводить сюда мои категории к примеру первые 10шт. остальные, чтоб скрывались? Т.е. на сайте будет много категорий и из-за этого менюха будет большой, как можно это сделать?