Toggle flip cards-CodePudding

I have a simple portfolio website with three flip cards. As of now, the flip functionality is there and I am mostly done with the website. The thing is, I want the other cards to toggle when one card is clicked. In other words, I want there to only be one card flipped at a time. How can I make this happen?

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hayden dyer</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
    <div class="card">
        <div class="card__inner">
            <div class="card__face card__face--front about">
                <h2>About Me</h2>
            </div>
            <div class="card__face card__face--back">
                <div class="card__content">
                    <div class="card__header">
                        <img src="./haydendyer080421bw.jpg" alt="my face" class="pic" />
                        <h2>Hi there! I'm Hayden Dyer.</h2>
                    </div>
                    <div class="card__body">
                        <p>lorem ipsum dolor sit amet consectetur adipisicing elit. iure, aperiam eaque. quasi architecto illum reiciendis fuga ipsam distinctio quis. molestias rem harum, tempora quos pariatur dignissimos aperiam vitae amet esse?</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card__inner">
            <div class="card__face card__face--front projects">
                <h2>My Projects</h2>
            </div>
            <div class="card__face card__face--back">
                <div class="card__content">
                    <div class="card__body">
                        <p>lorem ipsum dolor sit amet consectetur adipisicing elit. iure, aperiam eaque. quasi architecto illum reiciendis fuga ipsam distinctio quis. molestias rem harum, tempora quos pariatur dignissimos aperiam vitae amet esse?</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card__inner">
            <div class="card__face card__face--front contact">
                <h2>Contact</h2>
            </div>
            <div class="card__face card__face--back">
                <div class="card__content">
                    <div class="card__body">
                        <h3><a href="mailto: [email protected]" target="_blank" rel="noopener noreferrer">email</a></h3>
                        <h3><a href="https://www.linkedin.com/in/hayden-dyer/" target="_blank" rel="noopener noreferrer">linkedin</a></h3>
                        <h3><a href="https://github.com/HaydenDyer" target="_blank" rel="noopener noreferrer">github</a></h3>
                        <h3><a href="https://twitter.com/haydenDyer_" target="_blank" rel="noopener noreferrer">twitter</a></h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./script.js"></script>
</body>
</html>

script.js:

const cards = document.querySelectorAll(".card__inner");

function flipCard() {
    this.classList.toggle('is-flipped');
};

cards.forEach((card) =>card.addEventListener("click", flipCard));

style.css:

:root {
    --dark: #312b2b;
    --light: #F5EFEB;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--light);
    font-family: 'Poppins', sans-serif;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
}

.card {
    width: calc(100% / 3);
    height: 100vh;
    perspective: 800px;
}

.card__inner {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
}

.card__inner.is-flipped {
    transform: rotateY(180deg);
}

.card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
}

.card__face--front {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about {
    background-color: #05668D;
}

.projects {
    background-color: #028090;
}

.contact {
    background-color: #00A393;
}

.card__face--front h2 {
    color: var(--light);
    font-size: 64px;
}

.card__face--back {
    background-color: var(--light);
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
}

.pic {
    display: block;
    width: 192px;
    height: 192px;
    margin: 32px auto;
    object-fit: cover;
}

.card__header h2 {
    color: var(--dark);
    font-size: 24px;
    text-align: center;
}

.card__body {
    padding: 32px;
}

.card__body h3 {
    color: var(--dark);
    font-size: 32px;
}

.card__body p {
    color: var(--dark);
    font-size: 16px;
    line-height: 2;
}

a {
    text-decoration: none;
    color: var(--dark)
}

a:hover {
    text-decoration: underline;
}

CodePudding user response：

One way is to do it is as follows: When a card is clicked, "unflip" all other cards, and then toggle the flip status of the clicked card.

function flipCard() {

    // "unflip" all cards other than the one clicked
    cards.forEach((card) => {
      if(card != this) {
        card.classList.remove('is-flipped');
      }
    });
    
    this.classList.toggle('is-flipped');
};

Demo snippet:

Show code snippet

const cards = document.querySelectorAll(".card__inner");

function flipCard() {

    // "unflip" all cards other than the one clicked
    cards.forEach((card) => {
      if(card != this) {
        card.classList.remove('is-flipped');
      }
    });
    
    this.classList.toggle('is-flipped');
};

cards.forEach((card) =>card.addEventListener("click", flipCard));

:root {
    --dark: #312b2b;
    --light: #F5EFEB;
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--light);
    font-family: 'Poppins', sans-serif;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
}

.card {
    width: calc(100% / 3);
    height: 100vh;
    perspective: 800px;
}

.card__inner {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
}

.card__inner.is-flipped {
    transform: rotateY(180deg);
}

.card__face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
}

.card__face--front {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about {
    background-color: #05668D;
}

.projects {
    background-color: #028090;
}

.contact {
    background-color: #00A393;
}

.card__face--front h2 {
    color: var(--light);
    font-size: 64px;
}

.card__face--back {
    background-color: var(--light);
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
}

.pic {
    display: block;
    width: 192px;
    height: 192px;
    margin: 32px auto;
    object-fit: cover;
}

.card__header h2 {
    color: var(--dark);
    font-size: 24px;
    text-align: center;
}

.card__body {
    padding: 32px;
}

.card__body h3 {
    color: var(--dark);
    font-size: 32px;
}

.card__body p {
    color: var(--dark);
    font-size: 16px;
    line-height: 2;
}

a {
    text-decoration: none;
    color: var(--dark)
}

a:hover {
    text-decoration: underline;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hayden dyer</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
    <div class="card">
        <div class="card__inner">
            <div class="card__face card__face--front about">
                <h2>About Me</h2>
            </div>
            <div class="card__face card__face--back">
                <div class="card__content">
                    <div class="card__header">
                        <img src="./haydendyer080421bw.jpg" alt="my face" class="pic" />
                        <h2>Hi there! I'm Hayden Dyer.</h2>
                    </div>
                    <div class="card__body">
                        <p>lorem ipsum dolor sit amet consectetur adipisicing elit. iure, aperiam eaque. quasi architecto illum reiciendis fuga ipsam distinctio quis. molestias rem harum, tempora quos pariatur dignissimos aperiam vitae amet esse?</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card__inner">
            <div class="card__face card__face--front projects">
                <h2>My Projects</h2>
            </div>
            <div class="card__face card__face--back">
                <div class="card__content">
                    <div class="card__body">
                        <p>lorem ipsum dolor sit amet consectetur adipisicing elit. iure, aperiam eaque. quasi architecto illum reiciendis fuga ipsam distinctio quis. molestias rem harum, tempora quos pariatur dignissimos aperiam vitae amet esse?</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card__inner">
            <div class="card__face card__face--front contact">
                <h2>Contact</h2>
            </div>
            <div class="card__face card__face--back">
                <div class="card__content">
                    <div class="card__body">
                        <h3><a href="mailto: [email protected]" target="_blank" rel="noopener noreferrer">email</a></h3>
                        <h3><a href="https://www.linkedin.com/in/hayden-dyer/" target="_blank" rel="noopener noreferrer">linkedin</a></h3>
                        <h3><a href="https://github.com/HaydenDyer" target="_blank" rel="noopener noreferrer">github</a></h3>
                        <h3><a href="https://twitter.com/haydenDyer_" target="_blank" rel="noopener noreferrer">twitter</a></h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./script.js"></script>
</body>
</html>
script.js:

CodePudding user response：

It's easy, if card is-flipped unflip it and flip card what you wanted

Your script should look like this

const cards = document.querySelectorAll(".card__inner");

function flipCard() {
    for(let i = 0; i < cards.length; i  ) { 
        if(cards[i].classList.contains('is-flipped')) cards[i].classList.remove('is-flipped') 
    }
    this.classList.toggle('is-flipped');
};

cards.forEach((card) =>card.addEventListener("click", flipCard));