4,090
edits
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 11: | Line 11: | ||
// Attach a click event listener to each card | // Attach a click event listener to each card | ||
cards.on('click', function () { | cards.on('click', function (event) { | ||
// Log a message when a card is clicked | // Log a message when a card is clicked | ||
console.log('Clicked on card:', this); | console.log('Clicked on card:', this); | ||
// Stop event propagation to prevent interference with other click events | |||
event.stopPropagation(); | |||
// Show the fixed column | // Show the fixed column | ||
$('# | $('#show-article').css('display', 'block'); | ||
// Update the fixed column content with card information | // Update the fixed column content with card information | ||
Line 50: | Line 53: | ||
); | ); | ||
// Apply the fade-out effect to the # | // Apply the fade-out effect to the #list element | ||
$('# | $('#list').addClass('fade-out'); | ||
}); | }); | ||
// Attach a click event listener to close the fixed column | // Attach a click event listener to close the fixed column | ||
$('# | $('#show-article').on('click', function (event) { | ||
// Hide the fixed column when clicked outside or on the close button | // Hide the fixed column when clicked outside or on the close button | ||
if (event.target.id === 'close-button' || !$.contains(this, event.target)) { | if (event.target.id === 'close-button' || !$.contains(this, event.target)) { | ||
// Remove the fade-out class when hiding the fixed column | // Remove the fade-out class when hiding the fixed column | ||
$('# | $('#list').removeClass('fade-out'); | ||
$('#show-article').css('display', 'none'); | |||
} | } | ||
}); | }); |