Как получить подобные категории?

Question

[vasilgut]

Нужно получить вот такую структуру(учусь верстать, взял макет из интернета Как сделать это всё в плане js, чтобы пре клике на первую категорию, открывались категории второго уровня исходя из того, на какую кликнули, а при клике на категорию второго уровня появлялась нужная карточка и при смене категории карточка пропадала. Вот есть js для активного класса

const servicesList = document.querySelector('.services__сategory');
const activeClass = "active-category";
servicesList.addEventListener("click", function(event) {
    const element = event.target.closest(".category-item");
    if (!element) return;
    const activeElement = element.parentElement.querySelector(".active-category");
    activeElement?.classList?.remove(activeClass);
    element.classList.add(activeClass);
});

Answer 1

[alex4answ]

Способы существуют разные, но обычно используют класс-модификатор для списка, и все дочерние этого списка отображают.

1. Клик на элемент, добавляем класс .open для текущего элемента/списка дочерних
2. отображаем дочерний список если у него есть класс .open

что-то типа этого.

Comments

[vasilgut]

Как это выглядит в js, я новичок, код нашёл в интернете с активным классом, если не сложно, можете показать как это выглядит?

[vasilgut]

alex4answ, либо может ссылку с решением подобного вопроса

[alex4answ]

vasilgut, вы уже в вашем решении добавляете модификатор "active-category", далее пишите css правила, что все дочерние списки у .active-category - будут открыты

[vasilgut]

alex4answ, гляньте на мой вопрос на стаке, может там сможете помочь, просто Вы видимо не очень поняли мою проблему, ну или я неправильно расписал Воть сюда