Accordion

The Accordion component allows you to create collapsible content sections. By default, only one section can be open at a time, but you can allow multiple sections to be open simultaneously.

You can add data-accordion-close to any element inside the accordion content to close the current section when clicked.

Preview

• Accordion Item 1

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus sequi hic iste eveniet provident. At commodi, id veritatis aut aperiam eaque, consequatur architecto odit voluptas doloremque excepturi animi magnam quae?

• Accordion Item 2

  Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus corrupti necessitatibus id dignissimos. Odio officiis tempora nulla distinctio assumenda, quasi officia repellat voluptatem consectetur itaque consequatur est, asperiores rerum. Tempore!.

Html

<ul data-accordion="multiple:true|false;">
  <li class="accordion-item">
    <div class="accordion-title">
      Title
    </div>
    <div class="accordion-content">
      Content
    </div>
  <li>
</ul>

Astro

  ---
  import {
    Accordion,
    AccordionItem,
    AccordionTitle,
    AccordionContent,
  } from "@components/accordion";
  ---
  <Accordion>
    <AccordionItem>
      <AccordionTitle>Accordion Item 1</AccordionTitle>
      <AccordionContent>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus sequi hic
          iste eveniet provident. At commodi, id veritatis aut aperiam eaque,
          consequatur architecto odit voluptas doloremque excepturi animi magnam
          quae?
        </p>
      </AccordionContent>
    </AccordionItem>
  </Accordion>

Props

Prop	Type	Default	Description
multiple	boolean	false	Allows multiple accordion items to be open at the same time.

CSS Variables

The Accordion component utilizes the following CSS variables for customization:

--accordion-font-size: 20px; /* Font size of the accordion title. */
--accordion-padding: 15px; /* Padding inside the accordion title and content. */
--accordion-border-radius: 5px; /* Border radius of the accordion elements. */
--accordion-border-color: #ccc; /* Border color of the accordion elements. */
--accordion-icon-size: 20px; /* Size of the accordion icon. */
--accordion-transition-duration: 0.3s; /* Duration of the accordion animations. */
--accordion-content-margin-top: 10px; /* Margin top of the accordion content. */

Note: Dark mode overrides some variables when [data-theme='dark'] is applied.