Accordion

Lockness UI Component

VIEW

DOCUMENTATION

Accordion

A vertically stacked set of collapsible content sections. Uses native HTML <details> and <summary> elements for accessibility and zero-JavaScript functionality.

Installation

bash
deno run -A jsr:@lockness/ui add accordion

Usage

tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@lockness/ui/components'

<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styles using CSS variables.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Components

Accordion

The root container component.

PropTypeDefaultDescription
classstring-Additional CSS class names
childrenunknown-Accordion items

AccordionItem

Individual collapsible section using the native <details> element.

PropTypeDefaultDescription
valuestringrequiredUnique identifier for this accordion item
classstring-Additional CSS class names
childrenunknown-Item content (trigger and content)

AccordionTrigger

The clickable header using the native <summary> element. Includes a chevron icon that rotates when expanded.

PropTypeDefaultDescription
classstring-Additional CSS class names
childrenunknown-Trigger label content

AccordionContent

The collapsible content panel.

PropTypeDefaultDescription
classstring-Additional CSS class names
childrenunknown-Content to display when expanded

Theming

The Accordion component can be customized using CSS variables. This allows you to change the appearance of accordion items, triggers, and content globally or override specific instances.

Available CSS Variables

VariableDefaultDescription
--accordion-item-padding1remPadding for each accordion item
--accordion-trigger-font-size1remFont size for accordion trigger text
--accordion-trigger-font-weight500Font weight for accordion trigger text
--accordion-content-padding-bottom1remBottom padding for accordion content
--accordion-content-padding-top0Top padding for accordion content
--accordion-content-font-size0.875remFont size for accordion content
--accordion-icon-transition-duration200msDuration of the chevron rotation animation
--accordion-border-colorvar(--border)Border color between accordion items

Theming Examples

Global Customization

Customize all accordions by setting CSS variables in your theme:

css
/* app/view/assets/app.css */
@theme {
    --accordion-item-padding: 1.5rem;
    --accordion-trigger-font-size: 1.125rem;
    --accordion-trigger-font-weight: 600;
    --accordion-content-font-size: 1rem;
    --accordion-icon-transition-duration: 300ms;
}

Local Overrides

Override CSS variables for specific accordion instances:

tsx
<div style='--accordion-item-padding: 2rem; --accordion-trigger-font-weight: 700;'>
    <Accordion>
        <AccordionItem value='item-1'>
            <AccordionTrigger>Larger padding and bolder text</AccordionTrigger>
            <AccordionContent>
                This accordion has custom padding and trigger font weight.
            </AccordionContent>
        </AccordionItem>
    </Accordion>
</div>

Component-Specific Theming

Create themed sections with different accordion styles:

tsx
<section class="compact-accordion">
    <style>
        .compact-accordion {
            --accordion-item-padding: 0.5rem;
            --accordion-trigger-font-size: 0.875rem;
            --accordion-content-font-size: 0.75rem;
            --accordion-content-padding-bottom: 0.5rem;
        }
    </style>
    <Accordion>
        <AccordionItem value="item-1">
            <AccordionTrigger>Compact Style</AccordionTrigger>
            <AccordionContent>
                This accordion uses a more compact styling.
            </AccordionContent>
        </AccordionItem>
    </Accordion>
</section>

Features

  • Zero JavaScript - Uses native HTML details/summary elements
  • Accessible - Adheres to WAI-ARIA design patterns
  • Animated - Chevron rotates on expand/collapse
  • Themeable - Uses CSS variables for styling

BASIC ACCORDION

Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern and uses native HTML details/summary elements.
Is it styled?
Yes. It comes with default styles that use CSS variables for easy theming.
Can it be animated?
Yes. The component uses CSS transitions for smooth expand/collapse animations.
tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@lockness/ui/components'

<Accordion>
  <AccordionItem value='item-1'>
    <AccordionTrigger>Question?</AccordionTrigger>
    <AccordionContent>Answer.</AccordionContent>
  </AccordionItem>
</Accordion>

FAQ SECTION

What are the shipping options?
We offer standard shipping (5-7 business days) and express shipping (2-3 business days). Free shipping is available on orders over $50.
What is your return policy?
Items can be returned within 30 days of purchase for a full refund. Products must be in original condition with tags attached.
Do your products come with a warranty?
Yes, all our products come with a 1-year manufacturer warranty covering defects in materials and workmanship.
tsx
<Accordion>
  <AccordionItem value='shipping'>
    <AccordionTrigger>What are the shipping options?</AccordionTrigger>
    <AccordionContent>
      We offer standard shipping (5-7 business days)...
    </AccordionContent>
  </AccordionItem>
</Accordion>

SETTINGS PANEL

Account Settings

Email: user@example.com

Account Type: Premium

Member Since: January 2024

Notification Preferences
Privacy Settings
tsx
<Accordion>
  <AccordionItem value='account'>
    <AccordionTrigger>Account Settings</AccordionTrigger>
    <AccordionContent>
      {/* Settings content */}
    </AccordionContent>
  </AccordionItem>
</Accordion>
Edit this page