Свертывание древовидной структуры в django

У меня есть древовидная структура в Django. Она отображается в виде меню. Чтобы сделать ее компактной, нужно оформить ее в виде раскрывающегося/свертывающегося списка. Как это сделать?

класс 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>

Пока получается так:

введите описание изображения здесь

Это должно выглядеть следующим образом: введите описание изображения здесь

Вернуться на верх