Bootstrap 4 close previously clicked card that is flipped

Question

I have a card container that contains multiple cards, and when I click on a card it flips to show the back. When I click on another card I want the previously clicked card to close. My code does not seem to work. I have tried many variations of Jquery and JavaScript to no avail.

It works on hover, but I don't want to use it on hover, I want to click on it and then when I click another card it must close.

Currently when I click on a card it flips and stays flipped when I click on another card.

Any suggestions please?

Here is a fiddle: https://jsfiddle.net/hmt8n6x5/1/

<div class="row whole-shop-container shop-body show-products prod-content clearfix card-container">
  <div class="col-lg-6 col-md-6 col-sm-6 product-item">
      <div class="card card-flip h-100">
          <div class="card-front">
              <div class="card-body">
                  <div class="details shop-list-container">
                      <div class="shop-list">
                          <div class="shop-container">
                              <p>An image will be here</p>
                          </div>
                          <h4>Product Name 1</h4>
                          <button class="btn btn-outline-secondary">View Details</button>
                      </div>
                  </div>
              </div>
          </div>
          <div class="card-back bg-white">
              <div class="card-body">
                  <div class="product-detail-inner">
                      <h3 class="products-text product-name"><span>Product Name 1</span></h3>
                      <p class="products-text product-price">Product price: <span>$200</span></p>
                      <p class="products-text stock">Is there stock? <span>Yes, there are 4 left</span></p>
                      <p class="products-text product-description">Product Description: <span>Product 1 description</span></p>
                      <button class="addToCart btn btn-outline-secondary">Add to cart</button>
                  </div>
              </div>
          </div>
      </div>
  </div>
  <div class="col-lg-6 col-md-6 col-sm-6 product-item">
    <div class="card card-flip h-100">
        <div class="card-front">
            <div class="card-body">
                <div class="details shop-list-container">
                    <div class="shop-list">
                        <div class="shop-container">
                            <p>An image will be here</p>
                        </div>
                        <h4>Product Name 2</h4>
                        <button class="btn btn-outline-secondary">View Details</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-back bg-white">
            <div class="card-body">
                <div class="product-detail-inner">
                    <h3 class="products-text product-name"><span>Product Name 2</span></h3>
                    <p class="products-text product-price">Product price: <span>$300</span></p>
                    <p class="products-text stock">Is there stock? <span>Yes, there are 3 left</span></p>
                    <p class="products-text product-description">Product Description: <span>Product 2 description</span></p>
                    <button class="addToTrunk btn btn-outline-secondary">Add to cart</button>
                </div>
            </div>
        </div>
    </div>
  </div>
</div>

.card {
    background-color: transparent;
    border: 0;
}

/*
flip card
*/
.card-flip > div {
    backface-visibility: hidden;
    transition: transform 600ms;
    transition-timing-function: ease-out;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
}

.card-front {
    transform: rotateY(0deg);
}

.card-back {
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
}

.flipped {
    transform: rotateY(0deg);
}

/* .card-flip:hover .card-front {
    transform: rotateY(-180deg);
}

.card-flip:hover .card-back {
    transform: rotateY(0deg);
} */

const card = document.querySelectorAll('.card');
const front = document.querySelectorAll('.card-flip .card-front');
const back = document.querySelectorAll('.card-flip .card-back');
const cardContainer = document.querySelectorAll('.card-container');

for (let i = 0; i < card.length; i++) {
    card[i].addEventListener('click', function() {
        $('.card').removeClass('flipped');
        if (back[i].classList.contains('flipped')) {
            back[i].classList.remove('flipped');
            front[i].style.transform = "rotateY(-180deg)";
        } else {
            back[i].classList.add('flipped');
            front[i].style.transform = "rotateY(0deg)";

        }
    });
}

Answer 1 · 2020-07-29T18:58:29Z

July 29, 2020 6:58pm

Hi ilovecode,

In the code that you've commented out, try changing the pseudo class selector from hover to active. So instead of

styles.css

.card-flip:hover .card-front {
    transform: rotateY(-180deg);
}

.card-flip:hover .card-back {
    transform: rotateY(0deg);
}

try using:

styles.css

.card-flip:active .card-front {
    transform: rotateY(-180deg);
}

.card-flip:active .card-back {
    transform: rotateY(0deg);
}

Let me know if that doesn't help.

Welcome to the Treehouse Community

Looking to learn something new?

ilovecode

ilovecode

Bootstrap 4 close previously clicked card that is flipped

1 Answer

Brandon White

Brandon White