HTML Accordion Template — CSS JS FAQ UI, $129

Accordion Variants Included

FAQ Accordion

Question & Answer Layout

Expandable FAQ items with smooth height animation. Each item shows the question, expands to reveal the answer on click.

Single-Open

Only One Open at a Time

Closing previously open item when a new one opens — the classic accordion behavior for clean, uncluttered layouts.

Multi-Open

Multiple Items Open

Each item toggles independently. Used in settings panels, feature lists and content breakdowns where comparison matters.

Nested

Accordion Inside Accordion

Two-level nested accordion for complex content like API documentation, product specs or multi-category FAQs.

The CSS Animation Technique

/* Smooth height animation with max-height */
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.accordion-item.open .accordion-body {
  max-height: 600px; /* Larger than content */
  padding: 16px 24px;
}

/* Rotate chevron icon on open */
.accordion-item.open .chevron {
  transform: rotate(180deg);
}

Accordion Use Cases

FAQ Section

The most common use. Collapses all answers by default — users expand only what's relevant to them. Reduces page length dramatically.

Pricing Details

Show what's included in each plan in an accordion. Users compare tier features without scrolling through a long table.

Product Specifications

Collapse spec categories — Dimensions, Materials, Technical Specs, Shipping. Clean product pages that don't overwhelm.

Filter Sidebar

E-commerce filter panels use accordions for category groups — Price, Brand, Size, Color — collapsible and mobile-friendly.

Get 180+ Templates — $129 One-Time

Commercial license · No subscription · Instant download · Lifetime updates

Download All 180+ Templates

One payment · Own the files forever

Frequently Asked Questions

Do UIXDraft templates include FAQ accordion components?

Yes. The UI component templates include single-open, multi-open, nested and FAQ-specific accordion variants built in pure CSS and vanilla JS.

Is the accordion animation smooth?

Yes. The height animation uses max-height transition for smooth expand/collapse. The chevron icon rotates 180° to indicate state. No layout shift during animation.

Is the accordion keyboard accessible?

Yes. Each accordion trigger is a button element — focusable and activatable with Enter/Space. Screen readers announce the expanded/collapsed state via aria-expanded.

Can I have multiple accordions open at once?

Yes. Both single-open (only one panel at a time) and multi-open (any number of panels) variants are included. Switch between them with one JS configuration option.

Can I use accordions for a product FAQ page?

Yes. The FAQ accordion includes schema.org FAQPage structured data markup — Google can display the FAQ directly in search results as a rich snippet.

HTML Templates with Accordion UI