liquiddesign

Wzorzec 12

Akordeon bez mierzenia

Przez lata animacja akordeonu wymagała mierzenia treści w JavaScript, bo height auto nie daje się animować. Siatka to umie: wiersz przechodzi płynnie od 0fr do 1fr, a treść po prostu wypełnia dostępny ułamek. Ten wariant wybierz, gdy stan rozwinięcia musi znać aplikacja: kontrolowany komponent, zapis w adresie, analityka. Gdy stan obchodzi tylko użytkownika, wystarczy natywny wariant ze wzorca Rozwijanie bez skryptu.

Najczęstsze pytania klientów

Niewidzialna kopia w tej samej komórce siatki rezerwuje wysokość najwyższego stanu. Akordeon animuje się swobodnie, reszta strony zostaje na miejscu.

Po warsztacie zakresu dzielimy pracę na etapy z własnymi budżetami: tożsamość, system, wdrożenie. Każdy etap kończy się działającym artefaktem, nie prezentacją.

Reguły

  • Rozwijanie animuje grid-template-rows, nie height ani max-height z magiczną wartością.
  • Wewnętrzny kontener ma overflow hidden i min-height 0, żeby ułamek 0fr naprawdę znikał.
  • Gdy kilka sekcji może być otwartych naraz, niewidzialna kopia treści w tej samej komórce grid rezerwuje maksymalną wysokość, więc strona nie faluje przy otwieraniu.
  • Przycisk nagłówka niesie aria-expanded i wskazuje panel przez aria-controls.
  • prefers-reduced-motion wyłącza animację, stan zmienia się natychmiast.
  • Ten wzorzec ma sens, gdy stanem steruje aplikacja, w innym wypadku pierwszym wyborem jest natywny details.

Wzorzec w kodzie

Niewidzialna kopia rezerwuje wysokość, akordeon animuje się w środku
<div className="grid">
  <dl aria-hidden className="invisible col-start-1 row-start-1">
    {items.map((item) => (
      <dt key={item.id}>
        <span className={headerClassName}>{item.question}</span>
      </dt>
    ))}
    <dd className="grid">
      {items.map((item) => (
        <p key={item.id} className={`col-start-1 row-start-1 ${answerClassName}`}>
          {item.answer}
        </p>
      ))}
    </dd>
  </dl>

  <dl className="col-start-1 row-start-1 self-start">
    {items.map((item) => (
      <>
        <dt>…</dt>
        <dd
          className="grid transition-[grid-template-rows] duration-300"
          style={{ gridTemplateRows: isOpen ? "1fr" : "0fr" }}
        >
          <div className="min-h-0 overflow-hidden">
            <p className={answerClassName}>{item.answer}</p>
          </div>
        </dd>
      </>
    ))}
  </dl>
</div>
Pytanie to dt z przyciskiem i aria-expanded
<dt>
  <h3>
    <button
      aria-expanded={openId === id}
      aria-controls={panelId}
      onClick={() => setOpenId(openId === id ? null : id)}
    >
      {question}
    </button>
  </h3>
</dt>

Dlaczego nie height, stan na lipiec 2026

CSS potrafi już dojechać animacją do wysokości auto: interpolate-size: allow-keywords i calc-size() są w Chromium od wersji 129 z września 2024. Firefox i Safari nadal ich nie mają, więc animacja na tym mechanizmie potrzebuje zapasowej ścieżki.

Gdy wsparcie się domknie, antywzorzec zostanie w mocy z innego powodu: przejście wysokości przelicza layout w każdej klatce i pcha sąsiadów. Dlatego ten wzorzec rezerwuje wysokość niewidzialną kopią treści, a animuje wyłącznie ułamek wiersza w środku. Reszta strony stoi.

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia
Zaimplementuj w moim projekcie wzorzec „Akordeon bez mierzenia" z metodologii Liquid Design.

Rozwijanie animuje grid-template-rows od 0fr do 1fr, bez JavaScript liczącego wysokości treści.

Wymagania:
- Rozwijanie animuje grid-template-rows, nie height ani max-height z magiczną wartością.
- Wewnętrzny kontener ma overflow hidden i min-height 0, żeby ułamek 0fr naprawdę znikał.
- Gdy kilka sekcji może być otwartych naraz, niewidzialna kopia treści w tej samej komórce grid rezerwuje maksymalną wysokość, więc strona nie faluje przy otwieraniu.
- Przycisk nagłówka niesie aria-expanded i wskazuje panel przez aria-controls.
- prefers-reduced-motion wyłącza animację, stan zmienia się natychmiast.
- Ten wzorzec ma sens, gdy stanem steruje aplikacja, w innym wypadku pierwszym wyborem jest natywny details.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/akordeon