I am new to Jquery and CSS/scss and I have successfully created a dynamic boostrap card that resembles a record player. The goal is to generate multiple boostrap cards based on the data in DB, but for simplicity, I am showing only 2 examples below. My question is regarding how to manage the behavior of these record players - specifically, how do I ensure that only one player can be active at a time with vinyl animation? When a user clicks to play another card, the currently playing player should stop and revert back to the album cover using toggleclass. Please note that the code includes only the animation part and not the actual player functionality. How can I determine the current toggleclass name?
<div class="container-fluid">
<div id="content">
<div class="music-player-container is-not-playing" id="1mpc">
<div class="card card-inverse" id="1card">
<div class="card-header" id="1cardHeader">
<div class="top">
<i id="1fav" class="favtoggle fa not-liked"></i>
<i id="1pl" class="fa fa-plus-circle"></i>
</div>
</div>
...
javascript:
var $div = $('#content');
var playButton = $('.control-play');
playButton.on('click', function(e) {
//alert(e.target.id);
var $musiPlayerContainer = $div.find('#' + e.target.id + 'mpc');
var $vinyl = $div.find('#' + e.target.id + 'vinyl');
$(".music-player-container").not($('#' + e.target.id + 'mpc')).toggleClass('is-playing', false);
$('#' + e.target.id + 'mpc').toggleClass('is-playing', true);
e.stopPropagation();
});
CSS
/* Styles applied after bootstrap.css */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500);
/* More CSS styles... */
js-fiddle link: