[KuParty]

Подскажите, пожалуйста, как сделать так чтобы при клике по категории появлялись её подкатегории (изначально не видны), а после клика по подкатегории уже фильтровались товары. Категории и подкатегории подтягиваются из БД. Сейчас получилось сделать только подкатегории и фильтрацию товаров. В JS полный ноль, всё собираю по кускам из сети. Помогите, пожалуйста.
Код у меня есть по ссылке: https://codepen.io/KuParty/pen/WNKPLbL Здесь тоже дублирую:
HTML:

  <header class="header">
            <div class="filter-category">
            <button class="button button_type_all" data-filter="all">All</button>
            <button class="button button_type_running" data-filter="running">Running</button>
            <button class="button button_type_flying" data-filter="flying">Flying</button>
        </div>
        <div class="filter">
            <button class="button button_type_cat" data-filter="cat">Cat</button>
            <button class="button button_type_dog" data-filter="dog">Dog</button>
            <button class="button button_type_bird" data-filter="bird">Bird</button>
        </div>
    </header>
    <main class="content">
        <div class="container">
            <div class="card cat running">Cat</div>
            <div class="card dog running">Dog</div>
            <div class="card bird flying">Bird</div>
            <div class="card dog running">Dog</div>
            <div class="card cat running">Cat</div>
            <div class="card bird flying">Bird</div>
            <div class="card bird flying">Bird</div>
            <div class="card dog running">Dog</div>
            <div class="card cat running">Cat</div>
        </div>
    </main>

CSS:

:root {
  --color-orange: #ffa728;
  --color-red: #e66c6e;
  --color-green: #a7d6bb;
  --color-blue: #1c4961;
  --color-sky: #58C9E2FF;
  --color-brown: #a56e47;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Courier New", Courier, monospace;
  font-size: 16px;
  line-height: 1.2;
  background-color: #faebd7;
}

.header {
  padding: 20px 0;
  margin-bottom: 48px;
}

.filter {
  display: flex;
  justify-content: center;
  max-width: 1024px;
  margin: 0 auto;
}

.filter-category {
  display: flex;
  justify-content: center;
  max-width: 1024px;
  margin: 0 auto;
  padding-bottom: 20px;
}

.button {
  padding: 12px 24px;
  margin-right: 18px;
  cursor: pointer;
  color: white;
  text-transform: uppercase;
  font-weight: bold;
  border: 0;
  outline: none;
  border-radius: 0;
  position: relative;
}

.button:last-child {
  margin-right: 0;
}

.button:active {
  bottom: -1px;
}

.button_type_all {
  background-color: var(--color-orange);
}

.button_type_flying {
  background-color: var(--color-sky);
}

.button_type_running {
  background-color: var(--color-brown);
}

.button_type_cat {
  background-color: var(--color-green);
}

.button_type_dog {
  background-color: var(--color-red);
}

.button_type_bird {
  background-color: var(--color-blue);
}


.container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1024px;
  margin: 0 auto;
}

.card {
  width: calc(33.3333333% - 72px);
  margin: 36px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 48px;
  overflow: hidden;
  transition: 0.5s all;
}

.cat {
  background-color: var(--color-green);
}

.dog {
  background-color: var(--color-red);
}

.bird {
  background-color: var(--color-blue);
}

.anime {
  transform: scale(0);
  opacity: 0;
}

.hide {
  animation-name: hide;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes hide {
  0% {
    visibility: visible;
    height: 200px;
  }
  100% {
    visibility: hidden;
    width: 0;
    height: 0;
    max-width: 0;
    font-size: 0;
    margin: 0;
  }
}

JS:

function app() {
    const buttons = document.querySelectorAll('.button')
    const cards = document.querySelectorAll('.card')

    function filter (category, items) {
        items.forEach((item) => {
            const isItemFiltered = !item.classList.contains(category)
            const isShowAll = category.toLowerCase() === 'all'
            if (isItemFiltered && !isShowAll) {
                item.classList.add('anime')
            } else {
                item.classList.remove('hide')
                item.classList.remove('anime')
            }
        })
    }

    buttons.forEach((button) => {
        button.addEventListener('click', () => {
            const currentCategory = button.dataset.filter
            filter(currentCategory, cards)
        })
    })

    cards.forEach((card) => {
        card.ontransitionend = function () {
            if (card.classList.contains('anime')) {
                card.classList.add('hide')
            }
        }
    })
}

app()

Всё это сейчас прикручено к Jango таким образом:

<header class="header-filter">
        <div class="filter-category">
            <button class="button button_type_all" data-filter="all">Все</button>
            {% for sc in subcategories %}
                {% if sc.get_prods__count > 0 %}
                    <button class="button button_type_cat"
                            data-filter="{{ sc.slug }}">{{ sc.sub_cat_name }}</button>
                {% endif %}
            {% endfor %}
        </div>
    </header>
    <main class="content">
        <div class="container">
            {% for sc in subcategories %}
                {% if sc.get_prods__count > 0 %}
                    {% for p in prods %}
                        {% if p.subcategory_id == sc.pk %}
                            {% if p.photo %}
                                <div class="card {{ sc.slug }}">
                                    <a href="{{ p.get_absolute_url }}">
                                        {{ p.title }}
                                    </a>
                                </div>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                {% endif %}
            {% endfor %}
        </div>
    </main>