Accordion Card

Organize and display detailed information in a compact space with this interactive accordion card.

This is a classic component for "Frequently Asked Questions" (FAQ) pages, product feature lists, or any content that can be broken down into collapsible sections. This implementation ensures only one item can be open at a time, keeping the interface clean and focused.

Screenshot of an accordion-style card with expandable sections for an FAQ.

Get Source Code Preview

About this Component

This template combines a sleek visual design with the robust functionality of a true accordion. Clicking one item's header will automatically close any other item that is currently open. This behavior is managed by a small, dependency-free JavaScript snippet. The smooth open/close animation is handled by a modern CSS Grid technique.

Features

True Accordion Behavior: JavaScript ensures that only one panel can be open at any given time, preventing the card from becoming overly long.
Smooth Animation: Uses a CSS Grid animation on the grid-template-rows property to create a smooth, jank-free collapse and expand effect.
Accessible: Each toggle is a proper button with the aria-expanded attribute, which correctly informs screen readers about the state of the collapsible content.

Code Breakdown

HTML Structure

The entire component is wrapped in a main div class="accordion-card". Inside, each collapsible section is its own div class="accordion-item". Each item contains a button that serves as the header and a div for the collapsible content. This structure is repeated for every item in the accordion.

CSS Styling

The open/close animation is identical to the one used in the Expand/Collapse card. The content container (.accordion-item-content) is a grid container with its grid-template-rows property animated from 0fr (collapsed) to 1fr (fully expanded). This transition is triggered when the parent .accordion-item gets an .is-open class. The animated rotation of the chevron icon is also handled by a transform property tied to this same class.

JavaScript Logic

The script adds a click listener to each accordion header. When a header is clicked:

It first searches for any other item within the card that currently has the .is-open class and removes it, effectively closing it.
It then toggles the .is-open class on the specific item that was just clicked.
Finally, it updates the aria-expanded attribute on the clicked button to reflect its new state.

This "close others first, then toggle self" logic is what creates the true accordion effect.

Code

Here is the complete, self-contained code. You can easily build an FAQ or similar component by adding more .accordion-item blocks inside the main container.

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

View Output