RPF Design System for Rails
x
1
2
3
4
5
6
7
8
9
<details class="rpf-accordion"><summary class="rpf-accordion__title">Accordion number 1<span class="rpf-accordion__icon"></span></summary>
  <div class="rpf-accordion__text">Lalalaaa</div>
</details>
<details class="rpf-accordion"><summary class="rpf-accordion__title">Accordion number 2<span class="rpf-accordion__icon"></span></summary>
  <div class="rpf-accordion__text">Lalalaaa</div>
</details>
<details class="rpf-accordion"><summary class="rpf-accordion__title">Accordion number 3<span class="rpf-accordion__icon"></span></summary>
  <div class="rpf-accordion__text">Lalalaaa</div>
</details>
1
2
3
<% num_accordions.times do |num|%>
  <%= render DesignSystem::AccordionComponent.new(title: "Accordion number #{num + 1}", text: 'Lalalaaa', expanded: false) %>
<% end %>

Accordion Component - using multiple together

To use as a group, simple add one after another. There is no collection component or wrapper, but the component is designed to handle multiple instances on a page (borders etc do not double up but behave as expected).

example:

<%= render DesignSystem::AccordionComponent.new(title: "Accordion number 1", text: 'Lalalaaa') %>
<%= render DesignSystem::AccordionComponent.new(title: "Accordion number 2", text: 'Lalalaaa') %>
<%= render DesignSystem::AccordionComponent.new(title: "Accordion number 3", text: 'Lalalaaa') %>

If you are planning to use several groups of multiple accordions, you need to wrap each group in a containing element (e.g. a div).

example:

<div><!-- Group 1 -->
  <%= render DesignSystem::AccordionComponent.new(title: "Accordion number 1", text: 'Lalalaaa') %>
  <%= render DesignSystem::AccordionComponent.new(title: "Accordion number 2", text: 'Lalalaaa') %>
  <%= render DesignSystem::AccordionComponent.new(title: "Accordion number 3", text: 'Lalalaaa') %>
</div>
<div><!-- Group 2 -->
  <%= render DesignSystem::AccordionComponent.new(title: "Accordion A", text: 'Lalalaaa') %>
  <%= render DesignSystem::AccordionComponent.new(title: "Accordion B", text: 'Lalalaaa') %>
  <%= render DesignSystem::AccordionComponent.new(title: "Accordion C", text: 'Lalalaaa') %>
</div>
Param Description Input

—