I have a simple CSS3 Flipbox which I'm trying to re-use multiple times. The best would be if each element has a unique ID, and each of them would be separately triggered on click.
At the moment all the elements are being triggered on click.
What would be the best approach without just doubling the code?
Here demo of the code:
https://codepen.io/baidoc/pen/LYeqwxe
let cardTransitionTime = 500;
let $card = $('.card');
let switching = false;
$('.card').click(flipCard);
function flipCard() {
if (switching) {
return false;
}
switching = true;
$card.toggleClass('is-switched');
window.setTimeout(function () {
$card.children().children().toggleClass('is-active');
switching = false;
}, cardTransitionTime / 2);
}
I havent thought your transitionTime example through and left it out in a more simplified example, but for the other part you can simply use the event argument which is handed over to your called function per default:
$('.card').click(flipCard);
function flipCard(ev) {
ev.currentTarget.classList.toggle('is-switched');
}
Here I created an event listener on a parent element to the cards. No matter how many cards there are this event will be fired.
When you click either the header or one of the parent divs the nearest <div class="card"> will be found. Now the class name can be toggled for that element.
// event listener for any of the cards
document.getElementById('cardwrapper').addEventListener('click', e => {
// what card was clicked
let card = e.target.closest('.card');
// toogle class name 'is-switched'
card.classList.toggle('is-switched');
});$card-transition-time: 0.5s;
.card {
perspective: 600px;
position: relative;
cursor: pointer;
}
.card.is-switched .card__wrapper {
animation: rotate .5s linear both;
}
.card__wrapper {
transform-style: preserve-3d;
animation: rotate-inverse .5s linear both;
}
.card__side {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.card__side.is-active {
position: static;
}
.card__side--back {
transform: rotateY(180deg);
}
@keyframes rotate {
0% {
transform: rotateY(0);
}
70% {
transform: rotateY(200deg);
}
100% {
transform: rotateY(180deg);
}
}
@keyframes rotate-inverse {
0% {
transform: rotateY(180deg);
}
70% {
transform: rotateY(-20deg);
}
100% {
transform: rotateY(0);
}
}
// ignore
* {
box-sizing: border-box;
}
body {
background-color: #fff;
text-align: center;
padding: 1.5rem;
}
h1,
h2 {
margin: 0;
}
.card {
margin: 2rem auto;
max-width: 350px;
}
.card__side {
padding: 1em;
border-radius: 5px;
color: white;
background-color: #ff4136;
}
.card__side--back {
background-color: #0074d9;
}<div id="cardwrapper">
<div class="card" id="item1">
<div class="card__wrapper">
<div class="card__side is-active">
<h1>Card 1</h1>
</div>
<div class="card__side card__side--back">
<h2>Card 1</h2>
</div>
</div>
</div>
<div class="card" id="item2">
<div class="card__wrapper">
<div class="card__side is-active">
<h1>Card 2</h1>
</div>
<div class="card__side card__side--back">
<h2>Card 2</h2>
</div>
</div>
</div>
</div>