Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 49 из 70 · 8 мин
Аккордеоны, FAQ и спойлеры без единой строчки JavaScript.
Нас вечно спрашивают: «Есть ли Wi-Fi?», «Можно с собакой?» Хочу раскрывающийся FAQ.
Сделаю без единой строчки JavaScript. Это я умею сам 💪
<details><details>
<summary>Можно с собакой?</summary>
<p>Да! Даже миска с водой есть.</p>
</details><summary>details: всегда виден, клик раскрывает.<details>
<summary>Есть Wi-Fi?</summary>
<p>Да, пароль на чеке.</p>
</details>openopen раскрывает блок по умолчанию.namename у нескольких details — открыт только один.<details name="faq"><summary>Wi-Fi?</summary><p>Есть.</p></details>
<details name="faq"><summary>Розетки?</summary><p>У каждого стола.</p></details>Посетители спрашивают одно и то же. Сделай три вопроса FAQ через details и summary. Все три с одинаковым name="faq", чтобы открывался только один, а первый открыт сразу (open). Нажми на вопросы в результате.
summary — пока нетname="faq" — пока нетВыберите один ответ.
Какой элемент внутри <details> всегда виден и раскрывает блок по клику?
Выберите один ответ.
Как сделать, чтобы из нескольких details одновременно был открыт только один?
Проверяем состояние обучения…