Як можна було б зробити toggle-компонент, як в iPhone, без використання JS?

Повне пояснення

Що це і навіщо

Toggle‑компонент дозволяє приховувати/показувати контент без JavaScript, що зменшує розмір bundle і покращує доступність.

Принцип роботи / алгоритм

Використовується прихований чекбокс, який змінює стан checked. Сусідні елементи CSS‑селектором реагують на цей стан і змінюють стилі.

Реалізація (JS / TS / CSS)

<input type="checkbox" id="toggle" hidden>
<label for="toggle" class="btn">Toggle</label>
<div class="content">Текст, що приховується.</div>

#toggle:checked + .content { max-height: 1000px; opacity:1; }
.content { max-height:0; overflow:hidden; transition:max-height .3s ease, opacity .3s; }

Тестування

test('toggle shows content when checked', () => {
  const input = screen.getByRole('checkbox');
  fireEvent.click(input);
  expect(screen.getByText(/Текст/)).toBeVisible();
});

Проблеми та edge cases

1. Сумісність: старі браузери не підтримують :checked + sibling. Використайте polyfill.
2. Доступність: чекбокс прихований, тому треба додати aria-checked і керувати ним через JS при потребі.
3. Анімація: max-height має бути достатньо великим, інакше контент обрізається.
4. Фокус: кнопка label не отримує фокуса; додайте tabindex="0" для клавіатурного доступу.
5. Синхронність: при зміні стану через JS треба оновити атрибут checked і відповідно aria-checked.

Оптимізація та продуктивність

Використання чистого CSS мінімізує кількість перерисовок. Переконайтеся, що transition застосовується лише до властивостей, які можна анімувати без перерисовки layout.

Без JS / архітектурні альтернативи

Можна замінити чекбокс на details/summary для простого розгортання, але це не дає повного контролю над стилями.

Cheatsheet + follow-up

• :checked + sibling selector → простий toggle.
• max-height + overflow:hidden → анімація без JS.

Потенційне інтерв’ю‑питання: Як забезпечити доступність toggle, що реалізований лише CSS‑ом?