Accordion Card

<!DOCTYPE html>
<title>My Example</title>

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Optional: a container to center the card on the page for demonstration */
.demo-container-accordion {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* === Accordion Card Styles === */
.accordion-card {
    --accordion-radius: 12px;
    --accordion-shadow: 0 4px 10px rgba(0,0,0,0.06);
    --accordion-accent: #4f46e5;
    
    background-color: #ffffff;
    border-radius: var(--accordion-radius);
    box-shadow: var(--accordion-shadow);
    max-width: 600px;
    width: 100%;
}

.accordion-item {
    border-bottom: 1px solid #e5e7eb;
}
.accordion-item:last-child {
    border-bottom: none;
}

.accordion-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: left;
    color: #1f2937;
}

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

.accordion-icon {
    width: 20px;
    height: 20px;
    color: #6b7280;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* Collapsible content styling & animation */
.accordion-item-content {
    display: grid;
    grid-template-rows: 0fr; /* Collapsed by default */
    transition: grid-template-rows 0.3s ease-in-out;
}
.accordion-item-content > div {
    overflow: hidden;
}

.accordion-item-body {
    padding: 0 1.5rem 1.5rem;
    font-size: 1rem;
    line-height: 1.6;
    color: #374151;
}

/* === "Open" State === */
.accordion-item.is-open .accordion-item-header {
    color: var(--accordion-accent);
}
.accordion-item.is-open .accordion-icon {
    transform: rotate(180deg);
}
.accordion-item.is-open .accordion-item-content {
    grid-template-rows: 1fr; /* Expanded to full height */
}

</style>

<div class="demo-container-accordion">
    <div class="accordion-card">
        
        <div class="accordion-item">
            <button class="accordion-item-header" aria-expanded="false">
                What is component-based design?
                <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>
            </button>
            <div class="accordion-item-content">
                <div><div class="accordion-item-body">Component-based design is a methodology where UIs are built from a collection of reusable, self-contained parts (components) rather than monolithic pages.</div></div>
            </div>
        </div>

<div class="accordion-item">
            <button class="accordion-item-header" aria-expanded="false">
                How does this help with scalability?
                <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>
            </button>
            <div class="accordion-item-content">
                <div><div class="accordion-item-body">By reusing components, you ensure consistency across your entire application. Updating a single component (e.g., a button) will instantly update it everywhere it's used, making large-scale changes manageable.</div></div>
            </div>
        </div>
        
         <div class="accordion-item">
            <button class="accordion-item-header" aria-expanded="false">
                What are the benefits for accessibility?
                <svg class="accordion-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 011.06 0L10 11.94l3.72-3.72a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.22 9.28a.75.75 0 010-1.06z" clip-rule="evenodd"/></svg>
            </button>
            <div class="accordion-item-content">
                <div><div class="accordion-item-body">You can build accessibility into each component from the start. Once an accessible button component is built, every instance of that button across the site will be accessible by default.</div></div>
            </div>
        </div>

</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const accordionCard = document.querySelector('.accordion-card');
    if (!accordionCard) return;

const accordionItems = accordionCard.querySelectorAll('.accordion-item');

accordionItems.forEach(item => {
        const header = item.querySelector('.accordion-item-header');

header.addEventListener('click', () => {
            const currentlyOpen = accordionCard.querySelector('.accordion-item.is-open');
            
            // If another item is open, close it first
            if (currentlyOpen && currentlyOpen !== item) {
                currentlyOpen.classList.remove('is-open');
                currentlyOpen.querySelector('.accordion-item-header').setAttribute('aria-expanded', 'false');
            }
            
            // Then, toggle the clicked item
            item.classList.toggle('is-open');
            const isNowOpen = item.classList.contains('is-open');
            header.setAttribute('aria-expanded', isNowOpen);
        });
    });
});
</script>