Нужно получить вот такую структуру(учусь верстать, взял макет из интернета Как сделать это всё в плане 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);
});
Задавал этот вопрос на другом форму и на этом дали ответ, что можно добавить все данные в объект и при клике выводить нужные данные с него. Но я не понимаю пока как это сделать.
// 1
let servicesSubcategory = [...document.querySelectorAll("#services__subcategory > div")];
document.querySelector("#services__сategory").addEventListener("click", e => {
const index = [...e.target.parentElement.children].indexOf(e.target);
servicesSubcategory.map((item, key) => key === index ? item.classList.remove("hide") : item.classList.add("hide"))
});
// 2
let servicesDevelop = [...document.querySelectorAll("#services__items-develop > div")];
document.querySelector("#subcategory__develop").addEventListener("click", e => {
const index = [...e.target.parentElement.children].indexOf(e.target);
servicesDevelop.map((item, key) => key === index ? item.classList.remove("hide") : item.classList.add("hide"))
});
Вот мой пример того как пытался решить, под пунктом 1 показывание категорий второго уровня, под пунктом два, пример того, как пытался сделать вывод соответствующей карточки, но выходит так, что при смене категории, предыдущая карточка остаётся и в итоге они становятся друг на друга, вот почему мой вариант не подходит :(