Accordion

import Accordion from "@chitrank2050/monoline-docs/components/Accordion.astro";

<Accordion title="Does this need JavaScript?">
  <p>
    No. Opening and closing use the browser's native details
    element.
  </p>
</Accordion>

import Accordion from "@chitrank2050/monoline-docs/components/Accordion.astro";

<Accordion title="Does this need JavaScript?">
  <p>
    No. Opening and closing use the browser's native details
    element.
  </p>
</Accordion>

Use Accordion for optional explanations, FAQs and troubleshooting details. Keep essential instructions visible in the article so readers can find them without opening a disclosure.

Usage

Import the component in an MDX page or an Astro component. It is included in Monoline Docs; no additional UI library or React setup is required.

"astro\nimport Accordion from \"@chitrank2050/monoline-docs/components/Accordion.astro\"\n\n<Accordion title=\"More details\">\n <p>Place supporting content here.</p>\n</Accordion>"

In MDX, put imports after the page’s frontmatter. Inside an .astro component, put the import in its frontmatter script and the markup in its template. Plain .md pages cannot import components.

Initially open

Use open to reveal the content on first arrival. Readers can still close it.

<Accordion title="Before you publish" open>
  <p>
    Run a production build and check the generated pages before
    deploying.
  </p>
</Accordion>

<Accordion title="Before you publish" open>
  <p>
    Run a production build and check the generated pages before
    deploying.
  </p>
</Accordion>

Rich content

The default slot accepts paragraphs, lists, links and other static content. Keep interactive controls inside the content, away from the title.

<Accordion title="What should I verify?">
  <p>Check the pages your readers will use most:</p>
  <ul>
    <li>Follow links and heading anchors.</li>
    <li>Try search and copy controls.</li>
    <li>Read the site on a narrow screen.</li>
  </ul>
  <p>
    See the <a href="/deployment/">deployment guide</a> for
    hosting details.
  </p>
</Accordion>

<Accordion title="What should I verify?">
  <p>Check the pages your readers will use most:</p>
  <ul>
    <li>Follow links and heading anchors.</li>
    <li>Try search and copy controls.</li>
    <li>Read the site on a narrow screen.</li>
  </ul>
  <p>
    See the <a href="/deployment/">deployment guide</a> for
    hosting details.
  </p>
</Accordion>

Multiple items

Place multiple Accordions together for a short FAQ. Each item opens and closes independently, so readers can keep several answers visible. Exclusive opening, disabled items and controlled React state are not part of this component’s API.

<Accordion title="Can I use Markdown?">
  <p>
    Yes. Use Markdown for ordinary pages and MDX when you import
    components.
  </p>
</Accordion>
<Accordion title="Can both items stay open?">
  <p>
    Yes. Each Accordion is independent; opening one does not
    close another.
  </p>
</Accordion>

<Accordion title="Can I use Markdown?">
  <p>
    Yes. Use Markdown for ordinary pages and MDX when you import
    components.
  </p>
</Accordion>
<Accordion title="Can both items stay open?">
  <p>
    Yes. Each Accordion is independent; opening one does not
    close another.
  </p>
</Accordion>

API reference

The default slot holds the disclosure content. There are no named slots. An empty title or a non-boolean open value fails the build with a validation error.

Accessibility and behavior

• Keyboard: Tab focuses the title; Enter or Space toggles its content. Links and controls inside the content enter the tab order when the item is open.
• Semantics: Native details and summary communicate the expanded state. No additional ARIA roles or client directives are needed.
• Without JavaScript: Opening, closing and reading work with scripts disabled.
• Motion: The disclosure uses the native browser behavior and has no animated height transition. The focus indicator remains visible.
• Page contents: Accordion titles are controls, not article headings, and do not appear in the page’s table of contents.

Related