Foehn Design System

Accordion 

<div class="accordion" id="accordion-0">
    <div class="accordion-item">
        <h2 class="accordion-header mt-0" id="heading-0-1">
            <button aria-controls="collapse-0-1" aria-expanded="true" class="accordion-button" data-bs-target="#collapse-0-1" data-bs-toggle="collapse" data-search-field="1" type="button">
                Title 1
            </button>
        </h2>
        <div aria-labelledby="heading-0-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-0" id="collapse-0-1">
            <div class="accordion-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum neque commodi libero.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header mt-0" id="heading-0-2">
            <button aria-controls="collapse-0-2" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#collapse-0-2" data-bs-toggle="collapse" data-search-field="1" type="button">
                Title 2
            </button>
        </h2>
        <div aria-labelledby="heading-0-2" class="accordion-collapse collapse" data-bs-parent="#accordion-0" id="collapse-0-2">
            <div class="accordion-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum neque commodi libero.
            </div>
        </div>
    </div>
</div>
 
<div class="accordion" id="accordion-0">
  {%- for item in items -%}
  <div class="accordion-item">
    <h2 class="accordion-header mt-0" id="heading-0-{{ loop.index }}">
      <button aria-controls="collapse-0-{{ loop.index }}" aria-expanded="{%- if item.show -%}true{%- else -%}false{%- endif -%}" class="{%- if item.show -%}accordion-button{%- else -%}accordion-button collapsed{%- endif -%}" data-bs-target="#collapse-0-{{ loop.index }}" data-bs-toggle="collapse" data-search-field="1" type="button">
        {{ item.title }}
      </button>
    </h2>
    <div aria-labelledby="heading-0-{{ loop.index }}" class="{%- if item.show -%}accordion-collapse collapse show{%- else -%}accordion-collapse collapse{%- endif -%}" data-bs-parent="#accordion-0" id="collapse-0-{{ loop.index }}">
      <div class="accordion-body">
        {{ item.text }}
      </div>
    </div>
  </div>
  {%- endfor -%}
</div>
 
{
  "items": [
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum neque commodi libero.",
      "title": "Title 1",
      "show": true
    },
    {
      "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum neque commodi libero.",
      "title": "Title 2",
      "show": false
    }
  ]
}
  • Content: 
    @charset 'UTF-8';

.accordion-button {
  padding-right: 7em;

  &:after {
    position: absolute;
    right: 1.3em;
  }

  &:before {
    content: "Ouvrir";
    float: right;
    position: absolute;
    right: 3em;
  }

  &:not(.collapsed):before {
    content: "Fermer";
  }
}
  • URL: /components/raw/accordion/_accordion.scss
  • Filesystem Path: src/components/02-molecules/accordion/_accordion.scss
  • Size: 278 Bytes

Les accordéons