Accordion

Accordion

The Accordion component is used to organize related content into expandable sections. It is useful when you want to keep a page compact while still allowing users to reveal additional information when needed.

import Accordion from "rocksolidjs/Accordion";
import AccordionSummary from "rocksolidjs/AccordionSummary";
import AccordionDetails from "rocksolidjs/AccordionDetails";

export default function Example() {
  return (
    <div class="max-w-md">
      <Accordion>
        <AccordionSummary>
          What is gravity?
        </AccordionSummary>
        <AccordionDetails>
          Gravity is a force that attracts objects with mass
          toward one another. On Earth, it gives objects weight
          and causes them to fall toward the ground.
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary>
          What is photosynthesis?
        </AccordionSummary>
        <AccordionDetails>
          Photosynthesis is the process by which plants use
          sunlight, water, and carbon dioxide to produce
          energy in the form of glucose.
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary>
          What is an atom?
        </AccordionSummary>
        <AccordionDetails>
          An atom is the smallest unit of an element that
          retains the chemical properties of that element.
          It consists of a nucleus surrounded by electrons.
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

Composition

The Accordion components are designed to be composed together. An Accordion is made up of three components:

  1. Accordion — The root component that manages the expanded state, disabled state, and expand/collapse behavior.
  2. AccordionSummary — The clickable header that users interact with to expand or collapse the accordion.
  3. AccordionDetails — The content area that is displayed when the accordion is expanded.

A basic Accordion combines these three components together. The example below shows the basic composition of an Accordion using a summary and details section.

import Accordion from "rocksolidjs/Accordion";
import AccordionSummary from "rocksolidjs/AccordionSummary";
import AccordionDetails from "rocksolidjs/AccordionDetails";

export default function Example() {
  return (
    <Accordion>
      <AccordionSummary>
        What is My UI?
      </AccordionSummary>

      <AccordionDetails>
        My UI is a collection of reusable components
        for building modern applications.
      </AccordionDetails>
    </Accordion>
  );
}

AccordionSummary should be used as the interactive heading and AccordionDetails should contain the content associated with that heading.

Examples

Disabled

Use the disabled prop to prevent users from expanding or collapsing an Accordion.

import Accordion from "rocksolidjs/Accordion";
import AccordionSummary from "rocksolidjs/AccordionSummary";
import AccordionDetails from "rocksolidjs/AccordionDetails";

export default function DisabledAccordion() {
  return (
    <div class="max-w-md">
      <Accordion>
        <AccordionSummary>
          What is the speed of light?
        </AccordionSummary>
        <AccordionDetails>
          Light travels through a vacuum at approximately
          299,792 kilometers per second.
        </AccordionDetails>
      </Accordion>
      <Accordion disabled>
        <AccordionSummary>
          What is quantum entanglement?
        </AccordionSummary>
        <AccordionDetails>
          Quantum entanglement is a phenomenon where two
          particles can share a correlated quantum state,
          even when separated by large distances.
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary>
          What is evaporation?
        </AccordionSummary>
        <AccordionDetails>
          Evaporation occurs when molecules at the surface
          of a liquid gain enough energy to escape into
          the surrounding environment as a gas.
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

Custom Icon

Use collapsedIcon and expandedIcon to provide custom icons for the collapsed and expanded states.

import type { ComponentProps } from "solid-js";
import Accordion from "rocksolidjs/Accordion";
import AccordionSummary from "rocksolidjs/AccordionSummary";
import AccordionDetails from "rocksolidjs/AccordionDetails";

export default function Example() {
  return (
    <div class="max-w-md">
      <Accordion>
        <AccordionSummary
          collapsedIcon={<TriangleIcon />}
          expandedIcon={<TriangleIcon class="rotate-180" />}
        >
          What is a molecule?
        </AccordionSummary>
        <AccordionDetails>
          A molecule is a group of two or more atoms held
          together by chemical bonds.
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          collapsedIcon="+"
          expandedIcon="-"
        >
          What causes the seasons?
        </AccordionSummary>
        <AccordionDetails>
          Earth's seasons are primarily caused by the tilt
          of Earth's rotational axis as it orbits the Sun.
        </AccordionDetails>
      </Accordion>
      <Accordion>
        <AccordionSummary
          collapsedIcon={<TriangleIcon />}
          expandedIcon={<TriangleIcon class="rotate-180" />}
        >
          What is sound?
        </AccordionSummary>
        <AccordionDetails>
          Sound is a mechanical wave produced by vibrations
          that travel through a medium such as air, water,
          or a solid material.
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

const TriangleIcon = (
  props: ComponentProps<"svg">
) => (
	<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
		<path d="M0 0h24v24H0z" fill="none" />
		<path fill="currentColor" d="M10.285 3.858c.777-1.294 2.653-1.294 3.43 0l8.468 14.113c.8 1.333-.16 3.029-1.715 3.029H3.532c-1.554 0-2.514-1.696-1.715-3.029z" />
	</svg>
);

Controlled

Use the expanded and onChange props when the expanded state needs to be controlled by the parent component.

import { createSignal } from "solid-js";
import Accordion from "rocksolidjs/Accordion";
import AccordionSummary from "rocksolidjs/AccordionSummary";
import AccordionDetails from "rocksolidjs/AccordionDetails";

export default function Example() {
  const [expanded, setExpanded] = createSignal<number | null>(null);

  const handleChange = (index: number) => {
    setExpanded(expanded() === index ? null : index);
  };

  return (
    <div class="max-w-md">
      <Accordion
        expanded={expanded() === 0}
        onChange={() => handleChange(0)}
      >
        <AccordionSummary>
          What is an electric current?
        </AccordionSummary>
        <AccordionDetails>
          Electric current is the flow of electric charge
          through a conductor or other medium.
        </AccordionDetails>
      </Accordion>
      <Accordion
        expanded={expanded() === 1}
        onChange={() => handleChange(1)}
      >
        <AccordionSummary>
          What is kinetic energy?
        </AccordionSummary>
        <AccordionDetails>
          Kinetic energy is the energy an object possesses
          because of its motion. It depends on the object's
          mass and velocity.
        </AccordionDetails>
      </Accordion>
      <Accordion
        expanded={expanded() === 2}
        onChange={() => handleChange(2)}
      >
        <AccordionSummary>
          What is the water cycle?
        </AccordionSummary>
        <AccordionDetails>
          The water cycle describes the continuous movement
          of water through evaporation, condensation,
          precipitation, and collection.
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

Disable Transition

Use the disableTransition prop to disable the expand and collapse transition animation.

import Accordion from "rocksolidjs/Accordion";
import AccordionSummary from "rocksolidjs/AccordionSummary";
import AccordionDetails from "rocksolidjs/AccordionDetails";

export default function BasicAccordion() {
  return (
    <div class="max-w-md">
      <Accordion disableTransition>
        <AccordionSummary>
          What is gravity?
        </AccordionSummary>
        <AccordionDetails>
          Gravity is a force that attracts objects with mass
          toward one another. On Earth, it gives objects weight
          and causes them to fall toward the ground.
        </AccordionDetails>
      </Accordion>
      <Accordion disableTransition>
        <AccordionSummary>
          What is photosynthesis?
        </AccordionSummary>
        <AccordionDetails>
          Photosynthesis is the process by which plants use
          sunlight, water, and carbon dioxide to produce
          energy in the form of glucose.
        </AccordionDetails>
      </Accordion>
      <Accordion disableTransition>
        <AccordionSummary>
          What is an atom?
        </AccordionSummary>
        <AccordionDetails>
          An atom is the smallest unit of an element that
          retains the chemical properties of that element.
          It consists of a nucleus surrounded by electrons.
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

Customization

Use the class prop on each Accordion component to customize its appearance and integrate it with your application’s design.

import Accordion from "rocksolidjs/Accordion";
import AccordionSummary from "rocksolidjs/AccordionSummary";
import AccordionDetails from "rocksolidjs/AccordionDetails";

export default function Example() {
  return (
    <div class="max-w-md space-y-2">
      <Accordion
        class="overflow-hidden rounded-lg border border-neutral-200 bg-white shadow-sm dark:border-neutral-800 dark:bg-neutral-950"
      >
        <AccordionSummary
          class="px-4 py-3 font-semibold text-neutral-900 dark:text-neutral-100"
        >
          What is photosynthesis?
        </AccordionSummary>
        <AccordionDetails
          class="border-t border-neutral-200 px-4 text-sm leading-6 text-neutral-600 dark:border-neutral-800 dark:text-neutral-400"
        >
          Photosynthesis is the process by which plants,
          algae, and some bacteria convert light energy into
          chemical energy. Plants use sunlight, water, and
          carbon dioxide to produce glucose and oxygen.
        </AccordionDetails>
      </Accordion>
      <Accordion
        class="overflow-hidden rounded-xl border border-blue-200 bg-blue-50/50 dark:border-blue-900 dark:bg-blue-950/20"
      >
        <AccordionSummary
          class="px-5 py-4 font-medium text-blue-900 dark:text-blue-100"
        >
          How does gravity work?
        </AccordionSummary>
        <AccordionDetails
          class="border-t border-blue-200 px-5 text-sm leading-6 text-blue-800 dark:border-blue-900 dark:text-blue-200"
        >
          Gravity is the attractive force between objects with
          mass. It keeps planets in orbit around stars and
          causes objects near Earth's surface to accelerate
          toward the ground.
        </AccordionDetails>
      </Accordion>
      <Accordion
        class="overflow-hidden rounded-2xl border border-purple-200 bg-purple-50/50 dark:border-purple-900 dark:bg-purple-950/20"
      >
        <AccordionSummary
          class="px-6 py-4 text-lg font-semibold text-purple-900 dark:text-purple-100"
        >
          What is a black hole?
        </AccordionSummary>
        <AccordionDetails
          class="border-t border-purple-200 px-6 text-sm leading-7 text-purple-800 dark:border-purple-900 dark:text-purple-200"
        >
          A black hole is a region of spacetime where gravity
          is extremely strong. Beyond its event horizon,
          nothing can escape, including light.
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

Accordion ID

The optional accordionId prop provides a stable identifier for the Accordion’s accessibility relationships.

It links the AccordionSummary and AccordionDetails by generating the appropriate id, aria-controls, and aria-labelledby attributes.

When using multiple Accordions on the same page, provide a unique accordionId for each Accordion to ensure the underlying IDs remain unique.

import Accordion from "rocksolidjs/Accordion";
import AccordionSummary from "rocksolidjs/AccordionSummary";
import AccordionDetails from "rocksolidjs/AccordionDetails";

export default function Example() {
  return (
    <div class="max-w-md">
      <Accordion accordionId="accordion-id-example-1">
        <AccordionSummary>
          What is gravity?
        </AccordionSummary>
        <AccordionDetails>
          Gravity is a force that attracts objects with mass
          toward one another. On Earth, it gives objects weight
          and causes them to fall toward the ground.
        </AccordionDetails>
      </Accordion>
      <Accordion accordionId="accordion-id-example-2">
        <AccordionSummary>
          What is photosynthesis?
        </AccordionSummary>
        <AccordionDetails>
          Photosynthesis is the process by which plants use
          sunlight, water, and carbon dioxide to produce
          energy in the form of glucose.
        </AccordionDetails>
      </Accordion>
      <Accordion accordionId="accordion-id-example-3">
        <AccordionSummary>
          What is an atom?
        </AccordionSummary>
        <AccordionDetails>
          An atom is the smallest unit of an element that
          retains the chemical properties of that element.
          It consists of a nucleus surrounded by electrons.
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

Accessibility

The Accordion follows common accessible interaction patterns for expandable content.

  • Use descriptive text for AccordionSummary so users can understand what content will be expanded or collapsed.
  • The Accordion manages the expanded and collapsed state for assistive technologies automatically.
  • The relationship between AccordionSummary and AccordionDetails is established automatically through the appropriate accessibility attributes.
  • When using multiple Accordions, provide a unique accordionId for each Accordion. The value is used to construct the underlying IDs for the summary and details and their related ARIA attributes.
  • Ensure the summary has sufficient color contrast and a visible focus indicator.
  • Avoid placing interactive controls inside AccordionSummary unless their keyboard and screen reader behavior is handled appropriately.
  • Do not rely on visual styling alone to communicate the purpose or state of the Accordion.

API

The Accordion API is split across the three components that make up the Accordion.

Accordion

The Accordion component is responsible for managing the expanded state and the overall behavior of an accordion section.

Prop Type Required Default Description
accordionId string No — A unique identifier for the Accordion. It is used to construct the underlying IDs for AccordionSummary and AccordionDetails and their related accessibility attributes.
class string No — Additional CSS classes applied to the Accordion.
defaultExpanded boolean No false Determines whether the Accordion is expanded initially.
disabled boolean No false Prevents the Accordion from being expanded or collapsed.
disableTransition boolean No false Disables the expand and collapse transition animation.
expanded boolean No — Controls whether the Accordion is currently expanded.
onChange (event: Event, expanded: boolean) => void No — Called when the expanded state changes.

AccordionSummary

The AccordionSummary component provides the interactive header of an Accordion.

Prop Type Required Default Description
children JSXElement No — Content rendered inside the AccordionSummary.
class string No — Additional CSS classes applied to the AccordionSummary.
collapsedIcon JSXElement No — Icon displayed when the Accordion is collapsed.
expandedIcon JSXElement No — Icon displayed when the Accordion is expanded.
slotProps { button?: object; icon?: object } No — Provides props for customizing the Accordion slots.
  • button — Props for the summary button. Accepts ButtonProps.
  • icon — Props for the summary icon.

AccordionDetails

The AccordionDetails component contains the content displayed when an Accordion is expanded.

Prop Type Required Default Description
children JSXElement No — Content rendered inside the AccordionDetails.
class string No — Additional CSS classes applied to the AccordionDetails.
  • Button — Use Button for standalone actions.
  • Dialog — Use Dialog for content that requires focused user attention.
  • Tabs — Use Tabs when users need to switch between related sections of content.