Раскрывающиеся блоки и аккордеон
Collapse — блок, у которого виден только заголовок, а содержимое раскрывается по щелчку. Несколько таких блоков, из которых открыт только один, называют аккордеоном. На лендинге LearnUp так оформлен раздел «Вопросы и ответы».
Раскрывающийся блок
Компонент — collapse, части — collapse-title и collapse-content. Чтобы блок запоминал состояние, первым внутри ставят флажок <input type="checkbox">: он невидим и растянут на весь заголовок.
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="collapse border border-base-300 bg-base-100">
<input type="checkbox">
<div class="collapse-title font-semibold">Нужен ли опыт программирования?</div>
<div class="collapse-content text-sm">
Нет. Курс «Основы HTML» рассчитан на тех, кто начинает с нуля.
</div>
</div>Щёлкните по вопросу — под ним появится ответ, повторный щелчок его спрячет.
Стрелка и плюс
Модификаторы collapse-arrow и collapse-plus добавляют справа значок, который поворачивается или меняется на минус при раскрытии. Вместо флажка можно использовать теги <details> и <summary> — тогда collapse-title ставят на <summary>:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<details class="collapse collapse-arrow border border-base-300 bg-base-100">
<summary class="collapse-title font-semibold">Сколько длится курс?</summary>
<div class="collapse-content text-sm">
В среднем 4 недели, но уроки открыты сразу, и темп вы выбираете сами.
</div>
</details>Справа от вопроса стрелка вниз; при раскрытии она поворачивается вверх. Атрибут open у <details> делает блок раскрытым сразу.
Аккордеон
Аккордеон делают из блоков с радиокнопками вместо флажков. У радиокнопок общий name, поэтому, открыв один блок, вы закрываете предыдущий. Обёртка join join-vertical склеивает блоки в одну колонку, а каждый блок получает join-item:
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="join join-vertical w-full bg-base-100">
<div class="collapse collapse-arrow join-item border border-base-300">
<input type="radio" name="faq" checked>
<div class="collapse-title font-semibold">Как оплатить курс?</div>
<div class="collapse-content text-sm">Картой на странице курса, в долларах или евро.</div>
</div>
<div class="collapse collapse-arrow join-item border border-base-300">
<input type="radio" name="faq">
<div class="collapse-title font-semibold">Будет ли сертификат?</div>
<div class="collapse-content text-sm">Да, после выполнения всех заданий.</div>
</div>
<div class="collapse collapse-arrow join-item border border-base-300">
<input type="radio" name="faq">
<div class="collapse-title font-semibold">Можно ли вернуть деньги?</div>
<div class="collapse-content text-sm">Да, в течение 14 дней.</div>
</div>
</div>Три вопроса единым блоком, первый открыт. Откройте второй — первый закроется сам. join — отдельный компонент daisyUI: он убирает скругления на стыках, чтобы элементы выглядели единым целым.
| Способ | Поведение |
|---|---|
Флажок или <details> | Блоки открываются независимо |
Радиокнопки с общим name | Открыт только один блок |
Частая ошибка
Дать радиокнопкам аккордеона разные name — например, faq-1, faq-2, faq-3. Тогда каждая радиокнопка оказывается в своей группе: блоки открываются, но ни один больше не закрывается. Радиокнопки одного аккордеона должны иметь одинаковый name, а у второго аккордеона на странице — другой.