Camel2.0 — Dokumentacja komponentów UI

2.1.1 #Components.Accordion.Single Accordion — Tryb single

Dodaj data-accordion-single na kontenerze — tylko jeden otwarty na raz.

Example

Konto usuniesz w ustawieniach profilu. Pamiętaj: usunięcie konta jest nieodwracalne. Stracisz dostęp do serwisu, zgromadzonych punktów i nagród.

Nie. Każde konto jest przypisane do danych osobowych konkretnego użytkownika.

Markup: accordion--single.html

<div style="max-width: 1260px; margin: 0 auto; padding: 40px 0;">
  <div class="accordion" data-accordion data-accordion-single>
    <div class="accordion__item">
      <button class="accordion__header" type="button">
        <span class="accordion__title">Jak usunąć konto?</span>
        <svg class="accordion__icon" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.00863 20.2932C3.62384 20.6851 3.62337 21.321 4.00757 21.7136C4.38568 22.0999 4.99545 22.1065 5.38147 21.733L5.39997 21.7146L15.5144 11.4124L25.5992 21.6939C25.9777 22.0798 26.5874 22.0858 26.9731 21.7119L26.9916 21.6935C27.3698 21.3074 27.3757 20.6853 27.0092 20.292L26.9911 20.2731L16.2108 9.28225C15.8325 8.89664 15.2233 8.89038 14.8376 9.26357L14.8191 9.28192L4.00863 20.2932Z" fill="currentColor"/>
        </svg>
      </button>
      <div class="accordion__body">
        <div class="accordion__content">
          Konto usuniesz w&nbsp;<a href="#">ustawieniach profilu</a>. <strong>Pamiętaj: usunięcie konta jest nieodwracalne</strong>. Stracisz dostęp do&nbsp;serwisu, zgromadzonych punktów i&nbsp;nagród.
        </div>
      </div>
    </div>
    <div class="accordion__item">
      <button class="accordion__header" type="button">
        <span class="accordion__title">Czy mogę mieć więcej niż jedno konto?</span>
        <svg class="accordion__icon" xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M4.00863 20.2932C3.62384 20.6851 3.62337 21.321 4.00757 21.7136C4.38568 22.0999 4.99545 22.1065 5.38147 21.733L5.39997 21.7146L15.5144 11.4124L25.5992 21.6939C25.9777 22.0798 26.5874 22.0858 26.9731 21.7119L26.9916 21.6935C27.3698 21.3074 27.3757 20.6853 27.0092 20.292L26.9911 20.2731L16.2108 9.28225C15.8325 8.89664 15.2233 8.89038 14.8376 9.26357L14.8191 9.28192L4.00863 20.2932Z" fill="currentColor"/>
        </svg>
      </button>
      <div class="accordion__body">
        <div class="accordion__content">
          Nie. Każde konto jest przypisane do&nbsp;danych osobowych konkretnego użytkownika.
        </div>
      </div>
    </div>
  </div>
</div>

Source: src/scss/components/_accordion.scss, line 11