Automatically close the previously flipped card in Bootstrap 4

I have a card container with multiple cards inside. When I click on a card, it flips to show the back. However, I want the previously clicked card to close when I click on another card. My current code is not working as expected despite trying various Jquery and JavaScript methods.

Although the flip effect works on hover, I specifically need it to trigger on click. Furthermore, the issue persists in which the previously flipped card remains open even after clicking on a new card.

If you have any suggestions or solutions, please advise. You can view the code on this fiddle: https://jsfiddle.net/hmt8n6x5/1/

HTML

<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">
      ...

CSS

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

const card = document.querySelectorAll('.card');
const front = document.querySelectorAll('.card-flip .card-front');
...
javascripthtmlcssbootstrap-4

Answer №1

Revise your JavaScript code as follows:

$('.card .btn').click((element) => {
    $('.card').removeClass('active')
    $(element.target).parents('.card.card-flip').addClass('active')
})

Update your CSS with the following styles:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can parameters be sent without using the .jshintrc file with the gulp-jshint package?

Currently in the process of transitioning a grunt project to a gulp project. In the existing gruntfile, there is a section for the jshint task that looks like this: jshint: { options: { trailing:true, evil:false, indent:4, ...

javascriptnode.jsgulpjshint

Working with Associated Models in MongoDB using Sails.js

I am utilizing the Waterline ORM within Sails.js to construct a sample application with a model named 'Category'. Since a category can contain multiple subcategories, I have implemented a one-to-many association for this model: module.exports = ...

javascriptmongodbsails.jswaterline

Merging two arrays concurrently in Angular 7

When attempting to merge two arrays side by side, I followed the procedure below but encountered the following error: Cannot set Property "account" of undefined. This is the code in question: acs = [ { "account": "Cash In Hand", ...

javascriptangulartypescriptangular7

What is preventing Sublime Text from recognizing my pseudo classes as valid syntax?

I'm attempting to remove the underlines from all the links I've visited on a website. In my CSS file, I added nav li a:visited { text-decoration: none; } The word "visited" appears as white text in Sublime Text, indicating that the syntax ...

htmlcsscss-selectorssublimetext

Analyzing length of strings by dividing content within div tags using their unique ids

Here's my issue: I'm using AJAX to fetch a price, but the source from where it is fetched doesn't add a zero at the end of the price if it ends in zero. For example, if the price is 0.40 cents, it comes back as 0.4. Now, my objective is to t ...

javascriptjqueryajax

What are the steps to utilize DOMParser in next.js?

When it comes to manipulating an HTML string, in VanillaJS you would typically do something like this: let stringHTML = '<p>hello</p> <style> p{ ...

javascriptreactjsdomnext.jsdomparser

I'm looking to extract information from a webpage using Python by inputting specific criteria

Looking to gather information from a specific website - Link and save it either in a database or another location. The process involves providing input parameters such as entering the vehicle number, submitting it, then verifying if it matches your car. N ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

"Troubleshooting issue: Vue deep watch failing to detect changes in object properties

My initial data consists of a `customer` object. As I input text into various fields, different keys are added to the object. The watcher function triggers properly when a new key is added, but if an existing key is edited with a new value, the watcher doe ...

javascriptvue.jsobjectvuejs2vue-component

Hyperlink -> Boundary

Our homepage features various elements as part of the menu. Each element consists of a picture, title, and small description. The issue is that these menu items always display a border when the mouse hovers over them, despite attempts to hide it. You can ...

htmlcsshoverborder

Tips for saving ajax data in a line

I need to showcase data fetched from my database using jQuery.ajax() regularly, with each data entry having a title and description. To achieve this, I plan on utilizing setInterval(func, 5000). What I require is a JavaScript container (could be an array ...

javascriptajaxjquery

I need to print out a table, but when I preview the print, I want to rotate the entire page for better visibility

Is there a way to rotate the print review using CSS and HTML? I am facing issues as the CSS styles do not seem to apply properly on it. Can someone help me solve this problem? ...

htmlcssangular

Card flip animation using RotateY is experiencing delays in loading

While experimenting with jQuery and CSS3 animations, I encountered a strange issue. When hovering over the card or focusing on the CCV field in my pen, there is a delay in the color transition when the card flips over. It almost seems like it's loadin ...

jqueryhtmlcsscss-transforms

Issue encountered while working with PostgreSQL and Sequelize when using the array_append function

I'm encountering issues with the following code snippet let user = req.user.id; await MyTable.update( {'interested': Sequelize.fn('array_append', Sequelize.col('interested'), user)}, {'where ...

javascriptnode.jspostgresqlsequelize.js

Utilize the browser's back button when navigating pages that have been loaded through Ajax technology

$(document).ready(function () { $('#gnav a').click(function (e) { e.preventDefault(); $('#contents').load(this.hash.substr(1) +'.php') }); }); Here is the jQuery code I have written to load content into a ...

javascriptjqueryajax

The ReactJS code has been compiled without errors, but it is not displaying in the browser

After putting in a significant amount of effort, I successfully managed to install and configure ReactJS. Upon running the "npm start" command, the code was "COMPILED SUCCESSFULLY" and directed me to the web browser. However, there was no output visible; t ...

javascripthtmlnode.jsreactjs

Monitor Jenkins live logs with a personalized dashboard for real-time viewing

Our Jenkins CE is currently running close to 4000 jobs, with users accessing a Dashboard that utilizes Jenkins APIs. Previously, we provided an href link with a logs button for viewing logs, which would open the Jenkins logs page in an iFrame when clicked. ...

javahtmlreactjsjenkinsjenkins-plugins

Building a hybrid application in Angular using UpgradeModule to manage controllers

I am currently in the process of upgrading a large AngularJS application using UpgradeModule to enable running AngularJS and Angular 6 simultaneously without going through the preparation phase, which typically involves following the AngularJS style guide. ...

javascriptangularjsangulartypescripthybrid

Execute two different functions in AngularJS using ng-click in any order

There is a button labeled Modify. When clicked, the modify() function is triggered and the text on the button changes to Save. Clicking on it again will execute the save() function. Below are the codes: <button class="btn btn-primary" ng-click="modify ...

javascriptangularjs

The width of the absolute div shrinks to such an extent that the text starts wrapping around itself

My goal is to create a button that, when hovered over, displays a div. However, I am encountering challenges with the width and position of this div. The issue is illustrated in the images below and in the accompanying jsfiddle. When I set the positioning ...

htmlcsswidthcss-position

The event resizing feature in fullCalendar2.6* seems to be experiencing some issues

After updating from fullCalendar 1.6 to 2.6, all functionality seems to be working except for eventResize. In the newer version, I am unable to see the resize arrow when attempting to adjust events, although it was functioning properly in the previous ver ...

phpjqueryhtmlcssfullcalendar