Почему одновременно открываются несколько карточек при нажатии на одну карточку в моих настройках HTML/CSS/JavaScript? ⇐ CSS

[Anonymous]

Во-первых, здесь новичок в программировании, с небольшим опытом. У меня есть веб-страница, содержащая несколько карточек, каждая из которых представляет музейный экспонат. При нажатии на карточку я хочу, чтобы только эта конкретная карточка раскрывалась и отображала дополнительную информацию, а остальные оставались закрытыми. Однако я столкнулся с проблемой, из-за которой при нажатии на одну карточку одновременно открывается и эта карточка, и другая, но текст на неактивной не отображается.
HTML:
< бр />

Код: Выделить всё

[img]music_museum.jpg[/img]
harmony through time
Explore the evolution of music through the ages.
Start




[img]time_capsule.jpg[/img]
time capsule
Embark on a journey through historical artifacts and moments.
Start

JavaScript:

Код: Выделить всё

function toggleMuseum(card) {
var isActive = card.classList.contains('active');

// Remove active class from all cards
document.querySelectorAll('.museum-card').forEach(function (element) {
element.classList.remove('active');
});

// Toggle active class only on the clicked card
if (!isActive) {
card.classList.add('active');
}
}

CSS:

Код: Выделить всё

.museum-card.active .museum-description,
.museum-card.active .start-button {
display: block;
}

.active {
background-color:rgb(177, 134, 70);
}

I've tried using an alert function to find where the error is, but no matter where I put it, it wouldn't even appear.


Источник: https://stackoverflow.com/questions/781 ... rd-in-my-h