More actions
No edit summary |
No edit summary |
||
Line 11: | Line 11: | ||
}); | }); | ||
document.querySelectorAll('.sub-card').forEach(card => { | document.querySelectorAll('.sub-card').forEach(card => { | ||
card.addEventListener('click', function() { | card.addEventListener('click', function(event) { | ||
// | event.stopPropagation(); // Prevent event bubbling | ||
// Collapse all other sub-cards first | |||
document.querySelectorAll('.sub-card').forEach(otherCard => { | document.querySelectorAll('.sub-card').forEach(otherCard => { | ||
if (otherCard !== card) { | if (otherCard !== card) { | ||
Line 22: | Line 24: | ||
const isExpanded = card.getAttribute('data-expanded') === 'true'; | const isExpanded = card.getAttribute('data-expanded') === 'true'; | ||
card.setAttribute('data-expanded', isExpanded ? 'false' : 'true'); | card.setAttribute('data-expanded', isExpanded ? 'false' : 'true'); | ||
}); | |||
}); | |||
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'); | |||
}); | |||
}); | }); | ||
}); | }); |
Revision as of 19:38, 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
// Collapse all other sub-cards first
document.querySelectorAll('.sub-card').forEach(otherCard => {
if (otherCard !== card) {
otherCard.setAttribute('data-expanded', 'false');
}
});
// Toggle the expanded state of the clicked card
const isExpanded = card.getAttribute('data-expanded') === 'true';
card.setAttribute('data-expanded', isExpanded ? 'false' : 'true');
});
});
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');
});
});
});