Здравствуйте.
Есть меню категорий в которое динамически создаются и выводятся категории.
Картинка 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 }} ({{ child.subcategory_items_count }})
</a>
<ul class="children">
{% recursetree child.children.all %}
<li>
<a href="{% url 'shop:shop-list' node.slug %}">
{{ node.name }} ({{ 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шт. остальные, чтоб скрывались? Т.е. на сайте будет много категорий и из-за этого менюха будет большой, как можно это сделать?
