Skip to main content
USWDS + Tailwind

Accordion

An accordion is a list of headers that hide or reveal additional content when selected.

This component requires the following JavaScript plugin:

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

HTML 
<div
  data-part="accordion-root"
  class="space-y-2"
>
  <div
    data-part="accordion-item"
    data-value="one"
  >
    <h4 class="relative">
      <button
        data-part="accordion-trigger"
        class="group flex items-center w-full py-4 px-5 bg-gray-5 hover:bg-gray-10 font-bold focus:outline-4 focus:outline-blue-40v cursor-pointer text-left gap-3"
      >
        First Amendment
        <div class="h-full flex items-center ml-auto shrink-0">
          <div class="size-6 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"></div>
        </div>
      </button>
    </h4>
    <div
      data-part="accordion-content"
      class="py-6 px-4 not-[[data-state=open]]:hidden"
    >
      <p class="leading-normal max-w-prose">
        Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof;
        or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the
        Government for a redress of grievances.
      </p>
    </div>
  </div>
  <div
    data-part="accordion-item"
    data-value="two"
  >
    <h4 class="relative">
      <button
        data-part="accordion-trigger"
        class="group flex items-center w-full py-4 px-5 bg-gray-5 hover:bg-gray-10 font-bold focus:outline-4 focus:outline-blue-40v cursor-pointer text-left gap-3"
      >
        Second Amendment
        <div class="h-full flex items-center ml-auto shrink-0">
          <div class="size-6 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"></div>
        </div>
      </button>
    </h4>
    <div
      data-part="accordion-content"
      class="py-6 px-4 not-[[data-state=open]]:hidden"
    >
      <p class="leading-normal max-w-prose">
        A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and
        bear Arms, shall not be infringed.
      </p>
    </div>
  </div>
  <div
    data-part="accordion-item"
    data-value="third"
  >
    <h4 class="relative">
      <button
        data-part="accordion-trigger"
        class="group flex items-center w-full py-4 px-5 bg-gray-5 hover:bg-gray-10 font-bold focus:outline-4 focus:outline-blue-40v cursor-pointer text-left gap-3"
      >
        Third Amendment
        <div class="h-full flex items-center ml-auto shrink-0">
          <div class="size-6 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"></div>
        </div>
      </button>
    </h4>
    <div
      data-part="accordion-content"
      class="py-6 px-4 not-[[data-state=open]]:hidden"
    >
      <p class="leading-normal max-w-prose">
        No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of
        war, but in a manner to be prescribed by law.
      </p>
    </div>
  </div>
</div>

Multiselectable

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

HTML 
<div
  data-part="accordion-root"
  data-multiple
  class="space-y-2"
>
  <div
    data-part="accordion-item"
    data-value="one"
  >
    <h4 class="relative">
      <button
        data-part="accordion-trigger"
        class="group flex items-center w-full py-4 px-5 bg-gray-5 hover:bg-gray-10 font-bold focus:outline-4 focus:outline-blue-40v cursor-pointer text-left gap-3"
      >
        First Amendment
        <div class="h-full flex items-center ml-auto shrink-0">
          <div class="size-6 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"></div>
        </div>
      </button>
    </h4>
    <div
      data-part="accordion-content"
      class="py-6 px-4 not-[[data-state=open]]:hidden"
    >
      <p class="leading-normal max-w-prose">
        Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof;
        or
        abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to
        petition the
        Government for a redress of grievances.
      </p>
    </div>
  </div>
  <div
    data-part="accordion-item"
    data-value="two"
  >
    <h4 class="relative">
      <button
        data-part="accordion-trigger"
        class="group flex items-center w-full py-4 px-5 bg-gray-5 hover:bg-gray-10 font-bold focus:outline-4 focus:outline-blue-40v cursor-pointer text-left gap-3"
      >
        Second Amendment
        <div class="h-full flex items-center ml-auto shrink-0">
          <div class="size-6 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"></div>
        </div>
      </button>
    </h4>
    <div
      data-part="accordion-content"
      class="py-6 px-4 not-[[data-state=open]]:hidden"
    >
      <p class="leading-normal max-w-prose">
        A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and
        bear Arms, shall not be infringed.
      </p>
    </div>
  </div>
  <div
    data-part="accordion-item"
    data-value="third"
  >
    <h4 class="relative">
      <button
        data-part="accordion-trigger"
        class="group flex items-center w-full py-4 px-5 bg-gray-5 hover:bg-gray-10 font-bold focus:outline-4 focus:outline-blue-40v cursor-pointer text-left gap-3"
      >
        Third Amendment
        <div class="h-full flex items-center ml-auto shrink-0">
          <div class="size-6 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"></div>
        </div>
      </button>
    </h4>
    <div
      data-part="accordion-content"
      class="py-6 px-4 not-[[data-state=open]]:hidden"
    >
      <p class="leading-normal max-w-prose">
        No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of
        war, but in a manner to be prescribed by law.
      </p>
    </div>
  </div>
</div>

Bordered

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.

A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

HTML 
<div
  data-part="accordion-root"
  class="space-y-2"
>
  <div
    data-part="accordion-item"
    data-value="one"
  >
    <h4 class="relative">
      <button
        data-part="accordion-trigger"
        class="group flex items-center w-full py-4 px-5 bg-gray-5 hover:bg-gray-10 font-bold focus:outline-4 focus:outline-blue-40v cursor-pointer text-left gap-3"
      >
        First Amendment
        <div class="h-full flex items-center ml-auto shrink-0">
          <div class="size-6 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"></div>
        </div>
      </button>
    </h4>
    <div
      data-part="accordion-content"
      class="py-6 px-4 not-[[data-state=open]]:hidden border-b-4 border-x-4 border-gray-5"
    >
      <p class="leading-normal max-w-prose">
        Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof;
        or
        abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to
        petition the
        Government for a redress of grievances.
      </p>
    </div>
  </div>
  <div
    data-part="accordion-item"
    data-value="two"
  >
    <h4 class="relative">
      <button
        data-part="accordion-trigger"
        class="group flex items-center w-full py-4 px-5 bg-gray-5 hover:bg-gray-10 font-bold focus:outline-4 focus:outline-blue-40v cursor-pointer text-left gap-3"
      >
        Second Amendment
        <div class="h-full flex items-center ml-auto shrink-0">
          <div class="size-6 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"></div>
        </div>
      </button>
    </h4>
    <div
      data-part="accordion-content"
      class="py-6 px-4 not-[[data-state=open]]:hidden border-b-4 border-x-4 border-gray-5"
    >
      <p class="leading-normal max-w-prose">
        A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and
        bear Arms, shall not be infringed.
      </p>
    </div>
  </div>
  <div
    data-part="accordion-item"
    data-value="third"
  >
    <h4 class="relative">
      <button
        data-part="accordion-trigger"
        class="group flex items-center w-full py-4 px-5 bg-gray-5 hover:bg-gray-10 font-bold focus:outline-4 focus:outline-blue-40v cursor-pointer text-left gap-3"
      >
        Third Amendment
        <div class="h-full flex items-center ml-auto shrink-0">
          <div class="size-6 icon-[material-symbols--add] group-aria-expanded:icon-[material-symbols--remove]"></div>
        </div>
      </button>
    </h4>
    <div
      data-part="accordion-content"
      class="py-6 px-4 not-[[data-state=open]]:hidden border-b-4 border-x-4 border-gray-5"
    >
      <p class="leading-normal max-w-prose">
        No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of
        war, but in a manner to be prescribed by law.
      </p>
    </div>
  </div>
</div>

Component API

Accordions are made up of 4 primary elements:

Root

  • x-accordion

    Custom Alpine directive that marks the Accordion Root.

Item

  • x-accordion:item

    Custom Alpine directive that marks a single Accordion Item.

Trigger

  • x-accordion:trigger

    Custom Alpine directive that marks the Accordion Trigger.

  • aria-controls

    Type: string

    Accessibility attribute that links the Accordion Trigger control to it’s respective Accordion Content.

    Automatically handled with JavaScript.

  • aria-expanded

    Type: boolean

    Accessibility attribute that communicates whether an element is expanded or collapsed.

    Automatically handled with JavaScript.

Content

  • x-accordion:content

    Custom Alpine directive that marks the Accordion Content.

  • id

    Type: string

    Links the Accordion Content to it’s respective Accordion Trigger.

    Automatically handled with JavaScript.

  • hidden

    Type: 'until-found' | false

    Handles the visibility of the Accordion Content. When until-found, content will be hidden but discoverable to browser search. When false, content will be visible and hidden attribute will be removed.

    Automatically handled with JavaScript.

Keyboard Interactions

  • Enter or Space

    When focus is on an Accordion Item for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, the previously expanded panel is collapsed.

  • Tab

    Moves focus to the next focusable element. All Accordion Items in the Accordion List must be included in the page Tab sequence.

  • Down Arrow

    If focus is on an Accordion Item, moves focus to the next Accordion Item. If focus is on the last Accordion Item, moves focus to the first Accordion Item.

  • Shift + Tab

    Moves focus to the previous focusable element. All Accordion Items in the Accordion List must be included in the page Tab sequence.

  • Up Arrow

    If focus is on an Accordion Item, moves focus to the previous Accordion Item. If focus is on the first Accordion Item, moves focus to the last Accordion Item.

  • Home or fn + Left Arrow (Mac)

    If focus is on an Accordion Item, moves focus to the first Accordion Item.

  • End or fn + Right Arrow (Mac)

    If focus is on an Accordion Item, moves focus to the last Accordion Item.