Simple Native Accordion, CSS, JS

Simple Native Accordion, CSS, JS

<div class="accordion">
    <div class="accordion-item">
        <button class="accordion-header">Header 1</button>
        <div class="accordion-content">
            Content for first column.
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header">Header 2</button>
        <div class="accordion-content">
            Content for second column.
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header">Header 3</button>
        <div class="accordion-content">
            Content for third column.
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header">Header 4</button>
        <div class="accordion-content">
            Content for fourth column.
        </div>
    </div>
</div>
<style>
.accordion {
    width: 100%;
}

.accordion-item {
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

.accordion-header {
    display: block;
    background-color: #f5f5f5;
    padding: 10px 20px;
    cursor: pointer;
    width: 100%;
    border: none;
    text-align: left;
    font-size: 16px;
    transition: background-color 0.3s;
    outline: none;
}

.accordion-header:hover {
    background-color: #ddd;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
    padding: 0 20px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const accordionHeaders = document.querySelectorAll(".accordion-header");
    accordionHeaders.forEach(header => {
        header.addEventListener("click", function() {
            // Toggle current content
            const content = this.nextElementSibling;
            if(content.style.maxHeight) {
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            }

            // Close other contents
            accordionHeaders.forEach(otherHeader => {
                if(otherHeader !== header) {
                    otherHeader.nextElementSibling.style.maxHeight = null;
                }
            });
        });
    });
});
</script>