Topic: Dynamically Added Flipping Card
Adam Stapleton pro asked 6 years ago
Adam Stapleton pro answered 6 years ago
For anyone else stumbling across this issue. I found the answer by searching the code on the GitLabs repo. You just need to add the class ".flipped" to the parent container with the ".card-rotating" class. So this:
<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>
Would become this:
<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>
And you could use this to apply the class when the rotate-btn was clicked:
$('a.rotate-btn').click(function (e) { e.preventDefault(); var cardId = $(this).data('card'); $('#' + cardId).toggleClass('flipped'); });
Hopefully that helps someone in the future.
Huichofer pro commented 5 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 5 years ago
Thank You Very Much!
Huichofer's response the new correct answer
noahrama pro commented 5 years ago
Thank You Very Much!
Huichofer's response the new correct answer
Bartłomiej Malanowski staff commented 5 years ago
@Huichofer, could you please add your comment as an answer so we could mark it as the best one?
ijese free commented 4 years ago
Thanks, just what I needed!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes