Card with Expand & Collapse Toggle

Elegantly show and hide additional content within a card using this interactive, animated expand and collapse component.

This is a highly versatile pattern for FAQs, showing detailed product information, or any situation where you want to keep the initial UI clean and allow users to reveal more content on demand.

Screenshot of multiple expandable cards, demonstrating an FAQ-style list.

Get Source Code Preview

About this Component

This component combines HTML, CSS, and JavaScript to create a functional and visually pleasing user experience. The JavaScript is designed to handle any number of these cards on a single page, each operating independently. Modern CSS techniques create a smooth animation without flickering or content jumps.

Features

Handles Multiple Instances: The script automatically finds and manages all toggle cards on a page, allowing them to work independently without conflicts.
Smooth Animation: Uses a CSS Grid technique to animate the height of the collapsible section, providing a more reliable and smoother transition than older methods.
Accessible: Implements ARIA attributes like aria-expanded and aria-controls to ensure the component is usable by people relying on assistive technologies. The trigger is a proper button for keyboard accessibility.
Animated Icon: The chevron icon smoothly rotates to indicate the open or closed state of the collapsible panel.

Code Breakdown

HTML Structure

Each card requires a unique id on its main container, title, and collapsible content area. This is essential for the aria-controls and aria-labelledby attributes to work correctly, which creates a semantic link between the button and the content it controls for assistive technologies.

CSS Styling

The height animation uses CSS Grid. The collapsible container (.ecec-card-collapsible) is set to display: grid and has its grid-template-rows property animated from 0fr (zero fraction, or collapsed) to 1fr (one fraction, or expanded). The icon's rotation is handled by a simple CSS transform, which is toggled by the presence of an .is-open class on the main card.

JavaScript Logic

The script uses querySelectorAll()to find all card headers on the page and attach a click listener to each. When a header or its button is clicked, it uses .closest('.ecec-card') to find the specific parent card for that trigger. It then toggles an .is-open class on that specific card and updates its button's aria-expanded attribute. This instance-specific approach is what allows multiple cards to function independently.

Code

Here's the complete, self-contained code. Simply place the CSS, HTML, and JavaScript in your project as instructed. You can add or remove cards from the list as needed, ensuring each has a unique set of IDs.

<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>

View Output