Akordeon(ang. Accordion)

Akordeon pozwala na stopniowe prezentowanie dużych ilości informacji bez konieczności przeładowywania strony. Na podstawie nagłówka użytkownik decyduje, czy chce rozwinąć daną sekcję, aby zapoznać się z jej treścią.

Struktura

  1. Nagłówek sekcji

    1. Tytuł obowiązkowy

      Rekomendowany limit tekstu to 2 linijki na wszystkich rozdzielczościach.

    2. Strzałka obowiązkowy

      Strzałka w dół symbolizuje możliwość otwarcia sekcji, zaś strzałka w górę - zamknięcia sekcji.

    3. Separator obowiązkowy

      Zamyka od góry sekcję.

  2. Treść sekcji

    Jest widoczna po rozwinięciu sekcji. Poza samym tekstem może zawierać również przyciski (w tym linki), ikony, piktogramy, zdjęcia, player wideo czy zajawki.

Elementem klikalnym jest cała sekcja zawierająca nagłówek.

Warianty

Akordeon duży

Zalecany w przypadku konieczności umieszczenia dużej ilości treści lub dużej liczby komponentów.

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum aperiam necessitatibus tenetur provident optio consequatur quas voluptatem voluptatum? Officia accusantium et veritatis soluta debitis eius architecto expedita beatae exercitationem?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum aperiam necessitatibus tenetur provident optio consequatur quas voluptatem voluptatum? Officia accusantium et veritatis soluta debitis eius architecto expedita beatae exercitationem?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum aperiam necessitatibus tenetur provident optio consequatur quas voluptatem voluptatum? Officia accusantium et veritatis soluta debitis eius architecto expedita beatae exercitationem?

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum aperiam necessitatibus tenetur provident optio consequatur quas voluptatem voluptatum? Officia accusantium et veritatis soluta debitis eius architecto expedita beatae exercitationem?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum aperiam necessitatibus tenetur provident optio consequatur quas voluptatem voluptatum? Officia accusantium et veritatis soluta debitis eius architecto expedita beatae exercitationem?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum aperiam necessitatibus tenetur provident optio consequatur quas voluptatem voluptatum? Officia accusantium et veritatis soluta debitis eius architecto expedita beatae exercitationem? 

<ul class="accordion">
  <li class="accordion__row">
    <button aria-expanded="false" id="accordionF" class="accordion-row__header">
      <div class="header__section headline-1">Section 1</div>
      <div class="header__arrow-container">
        <i
          aria-hidden="true"
          class="select__icon mdi icon icon--small mdi-chevron-down"
        ></i>
      </div>
    </button>
    <section tabindex="-1" class="accordion-row__container">
      <div class="row-container__wrapper">
        <div class="grid">
          <div class="grid__col m-col--12 t-col--6 d-col--4">
            <section>
              <p class="small-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
                rerum aperiam necessitatibus tenetur provident optio consequatur
                quas voluptatem voluptatum? Officia accusantium et veritatis
                soluta debitis eius architecto expedita beatae exercitationem?
              </p>
            </section>
          </div>
          <div class="grid__col m-col--12 t-col--6 d-col--4">
            <section>
           
              <p class="small-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
                rerum aperiam necessitatibus tenetur provident optio consequatur
                quas voluptatem voluptatum? Officia accusantium et veritatis
                soluta debitis eius architecto expedita beatae exercitationem?
              </p>
            </section>
          </div>
          <div class="grid__col m-col--12 t-col--6 d-col--4">
            <section>

       
              <p class="small-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
                rerum aperiam necessitatibus tenetur provident optio consequatur
                quas voluptatem voluptatum? Officia accusantium et veritatis
                soluta debitis eius architecto expedita beatae exercitationem?
              </p>
            </section>
          </div>
        </div>
      </div>
    </section>
  </li>
  <li class="accordion__row">
    <button aria-expanded="false" id="accordionF" class="accordion-row__header">
      <div class="header__section headline-1">Section 2</div>
      <div class="header__arrow-container">
        <i
          aria-hidden="true"
          class="select__icon mdi icon icon--small mdi-chevron-down"
        ></i>
      </div>
    </button>
    <section tabindex="-1" class="accordion-row__container">
      <div class="row-container__wrapper">
        <div class="grid">
          <div class="grid__col m-col--12 t-col--6 d-col--4">
            <section class="col-container__column">

     
              <p class="small-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
                rerum aperiam necessitatibus tenetur provident optio consequatur
                quas voluptatem voluptatum? Officia accusantium et veritatis
                soluta debitis eius architecto expedita beatae exercitationem?
              </p>
            </section>
          </div>
          <div class="grid__col m-col--12 t-col--6 d-col--4">
            <section class="col-container__column">


              
              <p class="small-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
                rerum aperiam necessitatibus tenetur provident optio consequatur
                quas voluptatem voluptatum? Officia accusantium et veritatis
                soluta debitis eius architecto expedita beatae exercitationem?
              </p>
            </section>
          </div>
          <div class="grid__col m-col--12 t-col--6 d-col--4">
            <section class="col-container__column">


              
              <p class="small-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
                rerum aperiam necessitatibus tenetur provident optio consequatur
                quas voluptatem voluptatum? Officia accusantium et veritatis
                soluta debitis eius architecto expedita beatae exercitationem?
              </p>
            </section>
          </div>
        </div>
      </div>
    </section>
  </li>
</ul>

Akordeon mały

Zalecany w przypadku mniejszej ilości kontentu

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum aperiam necessitatibus tenetur provident optio consequatur quas voluptatem voluptatum? Officia accusantium et veritatis soluta debitis eius architecto expedita beatae exercitationem?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum aperiam necessitatibus tenetur provident optio consequatur quas voluptatem voluptatum? Officia accusantium et veritatis soluta debitis eius architecto expedita beatae exercitationem?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum aperiam necessitatibus tenetur provident optio consequatur quas voluptatem voluptatum? Officia accusantium et veritatis soluta debitis eius architecto expedita beatae exercitationem?

  • Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum aperiam necessitatibus tenetur provident optio consequatur quas voluptatem voluptatum? Officia accusantium et veritatis soluta debitis eius architecto expedita beatae exercitationem?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum aperiam necessitatibus tenetur provident optio consequatur quas voluptatem voluptatum? Officia accusantium et veritatis soluta debitis eius architecto expedita beatae exercitationem?

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum aperiam necessitatibus tenetur provident optio consequatur quas voluptatem voluptatum? Officia accusantium et veritatis soluta debitis eius architecto expedita beatae exercitationem? 

<ul class="accordion--small">
  <li class="accordion__row">
    <button aria-expanded="false" id="accordionF" class="accordion-row__header">
      <div class="header__section headline-3">Section 1</div>
      <div class="header__arrow-container">
        <i
          aria-hidden="true"
          class="select__icon mdi icon icon--small mdi-chevron-down"
        ></i>
      </div>
    </button>
    <section tabindex="-1" class="accordion-row__container">
      <div class="row-container__wrapper">
        <div class="grid">
          <div class="grid__col m-col--12 t-col--6 d-col--4">
            <section>

          
              <p class="small-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
                rerum aperiam necessitatibus tenetur provident optio consequatur
                quas voluptatem voluptatum? Officia accusantium et veritatis
                soluta debitis eius architecto expedita beatae exercitationem?
              </p>
            </section>
          </div>
          <div class="grid__col m-col--12 t-col--6 d-col--4">
            <section>

           
              <p class="small-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
                rerum aperiam necessitatibus tenetur provident optio consequatur
                quas voluptatem voluptatum? Officia accusantium et veritatis
                soluta debitis eius architecto expedita beatae exercitationem?
              </p>
            </section>
          </div>
          <div class="grid__col m-col--12 t-col--6 d-col--4">
            <section>

            
              <p class="small-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
                rerum aperiam necessitatibus tenetur provident optio consequatur
                quas voluptatem voluptatum? Officia accusantium et veritatis
                soluta debitis eius architecto expedita beatae exercitationem?
              </p>
            </section>
          </div>
        </div>
      </div>
    </section>
  </li>
  <li class="accordion__row">
    <button aria-expanded="false" id="accordionF" class="accordion-row__header">
      <div class="header__section headline-3">Section 2</div>
      <div class="header__arrow-container">
        <i
          aria-hidden="true"
          class="select__icon mdi icon icon--small mdi-chevron-down"
        ></i>
      </div>
    </button>
    <section tabindex="-1" class="accordion-row__container">
      <div class="row-container__wrapper">
        <div class="grid">
          <div class="grid__col m-col--12 t-col--6 d-col--4">
            <section>

             
              <p class="small-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
                rerum aperiam necessitatibus tenetur provident optio consequatur
                quas voluptatem voluptatum? Officia accusantium et veritatis
                soluta debitis eius architecto expedita beatae exercitationem?
              </p>
            </section>
          </div>
          <div class="grid__col m-col--12 t-col--6 d-col--4">
            <section>

             
              <p class="small-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
                rerum aperiam necessitatibus tenetur provident optio consequatur
                quas voluptatem voluptatum? Officia accusantium et veritatis
                soluta debitis eius architecto expedita beatae exercitationem?
              </p>
            </section>
          </div>
          <div class="grid__col m-col--12 t-col--6 d-col--4">
            <section>
      
            
              <p class="small-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
                rerum aperiam necessitatibus tenetur provident optio consequatur
                quas voluptatem voluptatum? Officia accusantium et veritatis
                soluta debitis eius architecto expedita beatae exercitationem?
              </p>
            </section>
          </div>
        </div>
      </div>
    </section>
  </li>
</ul>

Otwarcie kolejnej sekcji nie powoduje automatycznego zamknięcia uprzednio otwartej sekcji. Podczas otwierania i zamykania sekcji strzałka zmienia swoją pozycję czemu towarzyszy drobna animacja.

Zasady stosowania

Akordeon zawierający mniej istotną treść

Zaleca się stosowanie akordeonu na stronach, które zawierają dużo treści. Wówczas pod akordeonem powinna być schowana treść, która jest mniej istotna.

Akordeon na długich stronach

Akordeon może być szczególnie przydatny na długich stronach z jednorodną treścią, takich jak np. archiwum artykułów.

Nagłówek oddający treść

Nagłówek powinien dobrze wyrażać treść sekcji, aby użytkownik mógł ocenić, czy chce go rozwinąć.

Sekcje domyślnie zamknięte

Sekcje otwierają się dopiero po kliknięciu.

Akordeon na nieodpowiednim typie stron

Akordeonu nie należy stosować na stronach wizerunkowych ani w artykułach.

Akordeon chowający ważne informacje

Najważniejsze dla użytkownika informacje nie powinny być umieszczone w akordeonie.

Zbyt długi nagłówek

Nagłówek nie powinien być dłuższy niż 1 linijka tekstu na wszystkich rozdzielczościach.

Akordeon umieszczony w innym akordeonie

Akordeonu nie powinno się umieszczać w innym akordeonie, ponieważ utrudni to użytkownikowi zrozumienie architektury informacji.