4,090
edits
No edit summary Tag: Reverted |
No edit summary Tag: Manual revert |
||
Line 2: | Line 2: | ||
// Log a message to the console | // Log a message to the console | ||
console.log('JavaScript is working!'); | console.log('JavaScript is working!'); | ||
// Find all elements with class "card" | // Find all elements with class "card" | ||
Line 18: | Line 15: | ||
console.log('Clicked on card:', this); | console.log('Clicked on card:', this); | ||
// Show the fixed column | // Show the fixed column | ||
$('#show-article | $('#show-article').css('display', 'block'); | ||
// Update the fixed column content with card information | // Update the fixed column content with card information | ||
Line 52: | Line 49: | ||
'<p class="article-description">' + description + '</p>' | '<p class="article-description">' + description + '</p>' | ||
); | ); | ||
// 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 | $('#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($('# | if (event.target.id === 'close-button' || !$.contains(this, event.target)) { | ||
$('#show-article | // Remove the fade-out class when hiding the fixed column | ||
$('#list').removeClass('fade-out'); | |||
$('#show-article').css('display', 'none'); | |||
} | } | ||
}); | }); |