I am creating hover flip cards for an instructions manual, and I would like to create a button that would flip them all at once. To get the cards flipping, I only relied on CSS, but to make the button I need some javascript, which I have no idea how to use. Can anyone help me?
<script>
const flip-card = document.getElementByClassName("flip-card-inner")
flip-card.addEventListener("click",flipCard);
function flipCard() {
card.classList.toggle("flip-card-inner");
}
</script>
<body>
<button type="button" class="flipCard">Flip all</button>
<p/>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h5>Title</h5>
</div>
<div class="flip-card-back">
<ul style="font-size: 10pt;">
<li>Some text</li>
</ul>
</div>
</div>
</div>