Skip to main content

Accordion Component

Expandable content sections with full accessibility support

Basic Accordion

Amphibious is a modern CSS framework that provides a comprehensive set of components for building responsive web applications. It's designed to be lightweight, accessible, and easy to customize.

Key features include:

  • Zero JavaScript dependencies for core functionality
  • WCAG AA compliant
  • Mobile-first responsive design
  • Modular architecture

Getting started with Amphibious is simple:

  1. Include the CSS file in your HTML
  2. Add the optional JavaScript for interactive components
  3. Start using the component classes
<link rel="stylesheet" href="amphibious.css">

Amphibious supports all modern browsers including:

  • Chrome (last 2 versions)
  • Firefox (last 2 versions)
  • Safari 12+
  • Edge (Chromium)

Limited support is provided for Internet Explorer 11 with graceful degradation.

Multiple Items Open

Amphibious is optimized for performance with:

  • Minified CSS (226KB total)
  • Tree-shakeable modules
  • Optimized selectors
  • Hardware-accelerated animations

Built-in accessibility features include:

  • ARIA attributes
  • Keyboard navigation
  • Screen reader support
  • Focus management
  • High contrast mode support

Easily customize with CSS variables:

:root {
  --accordion-border: #e5e7eb;
  --accordion-hover: #f9fafb;
  --accordion-active: #f3f4f6;
}

Style Variants

Flush (No Borders)

Flush accordion removes outer borders for a cleaner look when embedded in other components.

Perfect for sidebars and nested content.

Separated Items

Each item is visually separated with spacing.

Great for distinct content sections.

Size Variants

Compact

Smaller padding for dense information displays.

Ideal for sidebars and mobile interfaces.

Large

Extra padding and larger text for improved readability on large screens.

Perfect for documentation and FAQ sections.

Icon Variants

Plus/Minus Icons

Uses plus/minus icons instead of chevrons.

Clear visual indication of expand/collapse state.

Color Variants

Primary

Uses the primary brand color.

Success

Green color scheme for positive content.

Info

Blue color scheme for informational content.

Warning

Orange color scheme for warnings.

Nested Accordions

This item contains a nested accordion:

Content of nested item 1.

Content of nested item 2.

Regular content without nesting.

JavaScript Controls

This accordion is controlled via JavaScript API.

Click the buttons above to control this accordion.

Fully programmable accordion behavior.