Collapse tree structure in django

I have a tree structure in Django. It is displayed as a menu. To make it compact, you need to design it as an expandable/collapsible list. How to do this?

class Composition(MPTTModel):

parent = TreeForeignKey('self', on_delete=models.CASCADE, blank=True, null=True, related_name="children", db_index=True)
mapping = models.BooleanField(default=False)
id_drawing = models.ImageField(upload_to='media/image/', blank=True, null=True, default="null")
position = models.PositiveIntegerField()
designstion = models.CharField(max_length=255, primary_key=True)
name = models.CharField(max_length=255, default="null")
description = models.TextField(blank=True, null=True, default="null")
quantities = models.PositiveIntegerField(blank=True, null=True, default="null")
slug = models.SlugField()

objects = TreeManager()
@property
def drawing_url(self):
    if self.id_drawing and hasattr(self.id_drawing, 'url'):
        return self.id_drawing.url

class MPTTMeta:
    order_insertion_by = ['designstion']


class Meta:
            verbose_name="Спецификация"
            verbose_name_plural="Спецификация"

def __str__(self):
    return "%s (%s)" % (self.name, self.designstion)

    {% recursetree catalog_list %}
        <li >
            <a href="{{ node.get_absolute_url }}">{{ node.name }}</a>
            {% if not node.is_leaf_node %}
                <ul class="children">
                    {{ children }}
                </ul>
            {% endif %}
        </li>
    {% endrecursetree %}
</ul>

So far it outputs like this:

enter image description here

It should be like this:
enter image description here