Card With Expand Collapse Toggle

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

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

/* Container for the list of cards */
.accordion-list-container {
    max-width: 600px;
    margin: 2rem auto; /* Centers the list on the page */
    padding: 0 1rem;
    display: grid;
    gap: 1rem;
}

/* === Expand & Collapse Card Styles === */
.ecec-card {
    --ecec-radius: 12px;
    --ecec-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    
    background: #ffffff;
    border-radius: var(--ecec-radius);
    box-shadow: var(--ecec-shadow);
    width: 100%;
    border: 1px solid #e5e7eb;
}

.ecec-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
}

.ecec-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.ecec-card-toggle-btn {
    background: transparent;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 50%;
}

.ecec-card-toggle-btn:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

.ecec-card-toggle-icon {
    width: 20px;
    height: 20px;
    color: #6b7280;
    transition: transform 0.3s ease-in-out;
}

/* === Collapsible Content Styling & Animation === */
.ecec-card-collapsible {
    display: grid;
    grid-template-rows: 0fr; /* Collapsed by default */
    transition: grid-template-rows 0.35s ease-in-out;
}

.ecec-card-collapsible > div {
    overflow: hidden;
}

.ecec-card-body {
    padding: 0 1.25rem 1.25rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    margin: 0 1.25rem;
    padding-top: 1.25rem;
    color: #374151;
    line-height: 1.6;
}

.ecec-card-body p {
    margin: 0;
}

/* === "Open" State === */
.ecec-card.is-open .ecec-card-toggle-icon {
    transform: rotate(180deg);
}

.ecec-card.is-open .ecec-card-collapsible {
    grid-template-rows: 1fr; /* Expanded to full height */
}

.ecec-card.is-open .ecec-card-header {
    /* Optional: style the header when open */
    color: #4f46e5;
}
</style>

<div class="accordion-list-container">

<div class="ecec-card">
        <div class="ecec-card-header">
            <h3 class="ecec-card-title" id="card-1-title">How does the animation work?</h3>
            <button class="ecec-card-toggle-btn" aria-expanded="false" aria-controls="collapsible-content-1" aria-labelledby="card-1-title">
                 <svg class="ecec-card-toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                </svg>
            </button>
        </div>
        <div class="ecec-card-collapsible" id="collapsible-content-1">
            <div><div class="ecec-card-body"><p>It uses a modern CSS Grid trick, animating the 'grid-template-rows' property from 0fr (collapsed) to 1fr (expanded). This provides a smooth transition without needing to calculate a fixed height.</p></div></div>
        </div>
    </div>

<div class="ecec-card">
        <div class="ecec-card-header">
            <h3 class="ecec-card-title" id="card-2-title">Is it accessible?</h3>
            <button class="ecec-card-toggle-btn" aria-expanded="false" aria-controls="collapsible-content-2" aria-labelledby="card-2-title">
                 <svg class="ecec-card-toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                </svg>
            </button>
        </div>
        <div class="ecec-card-collapsible" id="collapsible-content-2">
            <div><div class="ecec-card-body"><p>Yes. The component uses proper button elements and ARIA attributes like 'aria-expanded' and 'aria-controls' to ensure it's fully functional for users with screen readers and keyboard navigation.</p></div></div>
        </div>
    </div>

<div class="ecec-card">
        <div class="ecec-card-header">
            <h3 class="ecec-card-title" id="card-3-title">Are there any dependencies?</h3>
            <button class="ecec-card-toggle-btn" aria-expanded="false" aria-controls="collapsible-content-3" aria-labelledby="card-3-title">
                 <svg class="ecec-card-toggle-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
                </svg>
            </button>
        </div>
        <div class="ecec-card-collapsible" id="collapsible-content-3">
            <div><div class="ecec-card-body"><p>No. The logic is handled by a small snippet of vanilla JavaScript. You can drop it into any project without needing external libraries like jQuery.</p></div></div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const allToggleHeaders = document.querySelectorAll('.ecec-card .ecec-card-header');

allToggleHeaders.forEach(header => {
        header.addEventListener('click', function() {
            toggleCard(this.closest('.ecec-card'));
        });
        
        const toggleButton = header.querySelector('.ecec-card-toggle-btn');
        if (toggleButton) {
            toggleButton.addEventListener('click', (event) => {
                // Prevent the header click event from firing twice.
                event.stopPropagation();
                toggleCard(this.closest('.ecec-card'));
            });
        }
    });

function toggleCard(card) {
        if (!card) return;
        
        const toggleButton = card.querySelector('.ecec-card-toggle-btn');
        const isOpen = card.classList.toggle('is-open');

if (toggleButton) {
            toggleButton.setAttribute('aria-expanded', isOpen);
        }
    }
});
</script>