Связи ManyToMany в Django в Collapse accordion Bootstrap

Я только начинаю изучать Django и Bootstrap. Это мой первый учебный проект. Я хочу слева сделать раскрывающуюся панель, которая будет привязана к записям в БД. Примерно вот так это должно выглядеть, при раскрытии верхнего уровня, должен открываться еще один элемент аккордеона с дополнительной классификацией:Желаемый результат

Моя проблема в том, что во второй уровень аккордеона я хочу передавать элементы из БД, которые имеют связь с элементом аккордеона первого уровня. Например, для Полнофункциональных языков во втором уровне должны быть только первые 7 под типов. (от аспектно-ориентированных до мальтипарадигмальных + полнофункциональные)*. Записи в БД: введите сюда описание изображения

Я пыталась в base.html сделать следующим образом, но так не работает

{% for object in subcategory.filter(cat_id=querySetObject.pk) %}

Код models.py

from django.db import models
from django.urls import reverse


class Language(models.Model):
    title = models.CharField(max_length=255)
    content = models.TextField(blank=True)
    icon = models.ImageField(upload_to="media/")
    cat = models.ManyToManyField('SubCategory', symmetrical=False, blank=True)

    def __str__(self):
        return self.title

    def get_absolute_url(self):
        return reverse('descriptions_idx', kwargs={'idx': self.pk})


class Category(models.Model):
    name = models.CharField(max_length=100, db_index=True)

    def __str__(self):
        return self.name


class SubCategory(models.Model):
    name = models.CharField(max_length=100, db_index=True)
    cat = models.ForeignKey('Category', on_delete=models.PROTECT, null=True)

    def __str__(self):
        return self.name

Код views.py

import django.core.handlers.wsgi
import django.urls
import django.db.models
from django.shortcuts import render, redirect
from django.http import *
from .models import *


languages = ["Python", "Swift", "C#"]
menu = [{'title': "Главная страница", 'url_name': 'main'},
        {'title': "Списки языков", 'url_name': 'descriptions'}]


def main(request: django.core.handlers.wsgi.WSGIRequest):
    category: django.db.models.query.QuerySet = Category.objects.all()
    subcategory: django.db.models.query.QuerySet = SubCategory.objects.all()
    context = {
        "menu": menu,
        "title": "Главная страница",
        "category": category,
        "subcategory": subcategory
    }
    return render(request, "programmingLanguages/main.html", context)


def descriptions(request: django.core.handlers.wsgi.WSGIRequest):
    posts: django.db.models.query.QuerySet = Language.objects.all()
    context = {
        "menu": menu,
        "posts": posts,
        "languages": languages,
        "title": "Языки программирования"
    }
    return render(request, "programmingLanguages/descriptions.html", context)


def descriptions_idx(request: django.core.handlers.wsgi.WSGIRequest, idx: str) -> HttpResponse:
    return HttpResponse(f"<h1>Описание языка</h1><cp>{idx}</p>")


def pageNotFound(request: django.core.handlers.wsgi.WSGIRequest,
                 exception: django.urls.exceptions.Resolver404) -> HttpResponse:
    return HttpResponse(f"<h1>Страница не найдена!</h1>")

Код base.html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    {% load static %}
    <link href="{% static 'programmingLanguages/css/bootstrap.css' %}" rel="stylesheet">
</head>

<body style="background-color: #bfbfe1">
    <script src="{% static 'programmingLanguages/js/bootstrap.bundle.js' %}" ></script>
    <table class="table-page">

        <div class="navbar" style="background-color: #540101;">
            <ul class="nav">
                {% for i in menu %}
                <li class="nav-item"><a class="nav-link active" style="color: cornsilk; font-size: larger" aria-current="page" href="{% url i.url_name %}">{{i.title}}</a></li>
                {% endfor %}
            </ul>
        </div>
    </table>
    <div class="row">
        <div class="col-sm-3"  style="background-color: ivory">
            <div class="row">
                <div class="card">
                    <div class="card-header" title="Навигация">
                        <h3>Навигация по языкам</h3>
                    </div>
                </div>
            </div>
            <div class="row">
                {% for querySetObject in category %}
                <div class="accordion" id="accordionNavBar">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id=heading{{querySetObject.name}}>
                          <button class="accordion-button" style="background-color: #a41103; color: #fdfdef; border-block-color: crimson" type="button" data-bs-toggle="collapse" data-bs-target=#{{querySetObject.name}} aria-expanded="true" aria-controls={{querySetObject.name}}>
                            {{querySetObject.name}}
                          </button>
                        </h2>
                        <div id={{querySetObject.name}} class="accordion-collapse collapse show" aria-labelledby=heading{{querySetObject.name}} data-bs-parent="#accordionNavBar">
                          <div class="accordion-body" style="background-color: #98dfe1">

                            {% for object in subcategory %}
                                <div class="accordion" id="accordionSubNavBar">
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id=heading{{object.name}}>
                                          <button class="accordion-button" style="background-color: rgb(100,20,30); color: #fdfdef; height: 20px" type="button" data-bs-toggle="collapse" data-bs-target=#{{object.name}} aria-expanded="true" aria-controls={{object.name}}>
                                            {{object.name}}
                                          </button>
                                        </h2>
                                        <div id={{object.name}} class="accordion-collapse collapse hide" aria-labelledby=heading{{object.name}} data-bs-parent="#accordionSubNavBar">
                                          <div class="accordion-body" style="background-color: #98dfe1">
                                            <strong>Title</strong> Название NameLanguage
                                          </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                          </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

        </div>
        <div class="col">
            <table class="block content">
                {% block content %}
                {% endblock %}
            </table>
        </div>
    </div>
</body>
</html>
Вернуться на верх