Dynamically Added Flipping Card

<div class="card-wrapper">
  <div id="card-1" class="card-rotating effect__click text-center h-100 w-100">
    <div class="face front">
      <div class="card-body">
        <h4 class="font-weight-bold mb-3">Marie Johnson</h4>
        <a class="rotate-btn" data-card="card-1"><i class="fa fa-repeat"></i> Click here to rotate</a>
      </div>
    </div>
    <div class="face back">
      <div class="card-body">
        <h4 class="font-weight-bold">About me</h4>
      </div>
    </div>
  </div>
</div>

<div class="card-wrapper">
  <div id="card-1" class="card-rotating flipped effect__click text-center h-100 w-100">
    <div class="face front">
      <div class="card-body">
        <h4 class="font-weight-bold mb-3">Marie Johnson</h4>
        <a class="rotate-btn" data-card="card-1"><i class="fa fa-repeat"></i> Click here to rotate</a>
      </div>
    </div>
    <div class="face back">
      <div class="card-body">
        <h4 class="font-weight-bold">About me</h4>
      </div>
    </div>
  </div>
</div>

$('a.rotate-btn').click(function (e) {
  e.preventDefault();
  var cardId = $(this).data('card');
  $('#' + cardId).toggleClass('flipped');
});

Huichofer pro commented 6 years ago

Thanks Adam for this. I had the same problem and your answer led me to the current version implementation. Regards !

$('.rotate-btn').on('click', function () { var cardId = $(this).attr('data-card'); $("#".concat(cardId)).toggleClass('flipped'); });

---

noahrama pro commented 6 years ago

Thank You Very Much!

Huichofer's response the new correct answer

---

noahrama pro commented 6 years ago

Thank You Very Much!

Huichofer's response the new correct answer

---

Bartłomiej Malanowski staff pro premium commented 6 years ago

@Huichofer, could you please add your comment as an answer so we could mark it as the best one?

---

ijese commented 4 years ago

Thanks, just what I needed!

---