RPF Design System for Rails
x
1
2
3
<details class="rpf-accordion"><summary class="rpf-accordion__title">Accordion Title<span class="rpf-accordion__icon"></span></summary>
  <div class="rpf-accordion__text">This is the text for my accordion component.</div>
</details>
1
render DesignSystem::AccordionComponent.new(title:, text:, expanded:)

Accordion Component

DesignSystem::AccordionComponent.new(title: 'Abc', text: 'Def', **attrs)

Produces an accordion component, with a title and some text that can be expanded or collapsed.

Options

  • title: The title/summary of the accordion. Always visible.
  • text: The content of the accordion. Only visible when the accordion is expanded. If you need to pass in more complex content, you can omit the text attribute and pass it in as a block instead.

  • expanded: Whether the accordion should be expanded/open by default. Defaults to false. (optional)

    example:

    DesignSystem::AccordionComponent.new(title: 'Abc', text: 'Def')

    produces:

    <details class="rpf-accordion"><summary class="rpf-accordion__title">Abc<span class="rpf-accordion__icon">
    </span></summary>
    <div class="rpf-accordion__text">Def</div>
    </details>

  • It also accepts all the usual HTML attributes for a hr tag, e.g. id, class, data- etc.

Param Description Input

The title/summary of the accordion

The content of the accordion

—