More actions
No edit summary |
No edit summary |
||
Line 14: | Line 14: | ||
event.stopPropagation(); // Prevent event bubbling | event.stopPropagation(); // Prevent event bubbling | ||
// | // Toggle the expanded state of the clicked card | ||
const isExpanded = card.getAttribute('data-expanded') === 'true'; | |||
// Flip the current sub-card | |||
card.setAttribute('data-expanded', isExpanded ? 'false' : 'true'); | |||
// Hide all other sub-cards | |||
document.querySelectorAll('.sub-card').forEach(otherCard => { | document.querySelectorAll('.sub-card').forEach(otherCard => { | ||
if (otherCard !== card) { | if (otherCard !== card) { | ||
Line 20: | Line 26: | ||
} | } | ||
}); | }); | ||
}); | }); | ||
}); | }); |
Revision as of 19:47, 22 December 2024
/* Any JavaScript here will be loaded for all users on every page load. */
$(function(){
$('.card').on('mouseenter', function(event){
event.preventDefault();
$(this).toggleClass('hovered');
});
$('.card').on('mouseleave', function(event){
event.preventDefault();
$(this).toggleClass('hovered');
});
});
document.querySelectorAll('.sub-card').forEach(card => {
card.addEventListener('click', function(event) {
event.stopPropagation(); // Prevent event bubbling
// Toggle the expanded state of the clicked card
const isExpanded = card.getAttribute('data-expanded') === 'true';
// Flip the current sub-card
card.setAttribute('data-expanded', isExpanded ? 'false' : 'true');
// Hide all other sub-cards
document.querySelectorAll('.sub-card').forEach(otherCard => {
if (otherCard !== card) {
otherCard.setAttribute('data-expanded', 'false');
}
});
});
});
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('mouseleave', function() {
// Collapse all sub-cards when mouse leaves the main card
document.querySelectorAll('.sub-card').forEach(subCard => {
subCard.setAttribute('data-expanded', 'false');
});
});
});