Как правильно сверстать блок?

Question

[Kote111]

Здравствуйте. Есть блок состоит из 6 карточек.

При нажатии на карточку должно открываться вниз меню ещё из 6 карточек и при повторном нажатии закрыться.

Подскажите пожалуйста, как реализовать в html + js или через библиотеки?

Comments

[Вадим]

Что конкретно у Вас не получается? Где Ваш код, с которым нужно помочь?

[Kote111]

document.addEventListener('DOMContentLoaded', function () {
   const cards = document.querySelectorAll('.card');

   cards.forEach(card => {
      card.addEventListener('click', function () {
         cards.forEach(c => {
            if (c !== card) {
               c.classList.remove('active');
            }
         });
         card.classList.toggle('active');
      });
   });
});

вот код. Справляется, но теперь другая проблема.
Открывается только в ширину блока, как сделать открытие (ширина всего контейнера)?

[Kote111]

.card {
//    cursor: pointer;
//    overflow: hidden;
.card-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-top: 15px;
    background:  rgba(255, 255, 255, 0.70);
    display: grid;
grid-template-columns: repeat(4, 1fr);
    align-items: center;
   justify-items: center;
    gap: 50px;
}
.card.active .card-content {
//    max-height: 100%; 
// }
// .card-box {
//    box-sizing: border-box; 
// }

Answer 1

[Evgeniy]

Здесь вообще библиотеки не нужны. Так как чистый JavaScript справится с этим.