The below codes defines boxes that flips when any area of the box is touched or clicked but I would rather this function was specific to a button instead so that instead of clicking on any area of the box to achieve a flip, a button is used instead. How can I tweak this code to achieve this.
I want the button within these divs to be responsible for the flip function rather than having to click on any area of the box and I would equally like to achieve this possibility in all cases.
cards.forEach(card => {
card.addEventListener('click', function() {
card.classList.toggle('is-flipped');
});
})
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
}
.card {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1s;
transform-style: preserve-3d;
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: #333;
color: white;
transform: rotateY(180deg);
}
.card.is-flipped {
transform: rotateY(180deg);
}
<div class="flip-box">
<div class="card">
<div class="flip-box-front">
<h2>Front Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
</div>
<br/>
<div class="card">
<div class="flip-box-front">
<h2>Front Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
</div>
</div>
Assuming that all the button tags are "click to flip" and:
cards = someRoot.querySelectorAll(".card");
you can modify the code to:
cards.forEach(card => {
// For each card
card.querySelectorAll("div > button").forEach(btn => {
// For each button on the card sides
btn.addEventListener("click", ev => {
// Toggle the "is-flipped" class
ev.target.parentElement.parentElement.classList.toggle("is-flipped");
});
});
});
Full demo:
// Get all cards
var cards = document.querySelectorAll(".card");
cards.forEach(card => {
// For each card
card.querySelectorAll("div > button").forEach(btn => {
// For each button on the card sides
btn.addEventListener("click", ev => {
// Toggle the "is-flipped" class of the button parent's parent
ev.target.parentElement.parentElement.classList.toggle("is-flipped");
});
});
});.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
}
.card {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1s;
transform-style: preserve-3d;
}
.flip-box-front,
.flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: #333;
color: white;
transform: rotateY(180deg);
}
.card.is-flipped {
transform: rotateY(180deg);
}<div class="flip-box">
<div class="card">
<div class="flip-box-front">
<h2>Front Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
</div>
<br/>
<div class="card">
<div class="flip-box-front">
<h2>Front Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
<div class="flip-box-back">
<h2>Back Side</h2>
<p> some text </p>
<p> some text </p>
<button> click to flip </button>
</div>
</div>
</div>