نحوه ساخت آکاردئون آکاردئون با html و css (واکنش‌گرا)

<div class="accordion">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" aria-expanded="false">
                عنوان اول
            </button>
        </h2>
        <div class="accordion-content">
            <p>محتوای مربوط به عنوان اول.</p>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button class="accordion-button" type="button" aria-expanded="false">
                عنوان دوم
            </button>
        </h2>
        <div class="accordion-content">
            <p>محتوای مربوط به عنوان دوم.</p>
        </div>
    </div>
</div>

.accordion {
    background-color: #f1f1f1;
    border-radius: 5px;
}

.accordion-button {
    background-color: #e7e7e7;
    border: none;
    text-align: left;
    padding: 15px;
    width: 100%;
    cursor: pointer;
    outline: none;
    transition: background-color .3s;
}

.accordion-button:hover {
    background-color: #cccccc;
}

.accordion-content {
    padding: 15px;
    display: none; /* مخفی کردن محتوای آکاردئون به‌صورت پیش‌فرض */
    border-top: 1px solid #ccc;
}

.accordion-button:focus {
    outline: none;
}

const accordionButtons = document.querySelectorAll('.accordion-button');

accordionButtons.forEach(button => {
    button.addEventListener('click', () => {
        const accordionContent = button.nextElementSibling;
        const isActive = button.getAttribute('aria-expanded') === 'true';

        button.setAttribute('aria-expanded', !isActive);
        accordionContent.style.display = isActive ? 'none' : 'block';
    });
});