document.addEventListener("DOMContentLoaded", function () {
    const collapsibleArticles = document.querySelectorAll('.collapsible-article');

    collapsibleArticles.forEach(collapsibleArticle => {
        collapsibleArticle.addEventListener('click', function () {
            const isActive = this.classList.contains('active');
            collapsibleArticles.forEach(item => item.classList.remove('active'));
            if (!isActive) {
                this.classList.add('active');
            }
        });
    });

    // Add event listener for the main article
    const mainArticle = document.querySelector('.main-article');
    mainArticle.addEventListener('click', function () {
        collapsibleArticles.forEach(item => item.classList.remove('active'));
    });
});