Как сделать спойлер в wiki

Аккордеон, faq, спойлер и другие раскрывающиеся виджеты

Как сделать спойлер в wiki

Создать аккордеон, faq, спойлер и подобное, можно при помощи Div и JavaScript.
Но лучше: Details и Summary

Поддерживается всеми современными браузерами и это семантически правильно оформленный код, при использовании которого будут плюсы:

Как сделать спойлер в wiki

С одной стороны выглядит не очень красиво, с другой стороны нейтрально и легко может вписаться во многие дизайны. Кстати, дефолтный вид тега Details очень похож на спойлер от хабра, только нужно чуть перекрасить, сделать подчеркивание и получим семантически правильный, без javascript и дивов, хабровский спойлер.

Как сделать спойлер в wiki

К сожалению, у дефолтного маркера есть два недостатка:

Рассмотрим первый пример Details/Summary с измененным текстовым маркером:

Как сделать спойлер в wiki

Дефолтным маркерам делаем display:none и показываем альтернативный при помощи summary:before

summary:focus — обводка при помощи box-shadow, это нужно для клавиатуры, чтоб видно было активный элемент и можно было перемещаться клавишей таб и открывать и закрывать при помощи пробела.

Для тега summary я поставил display:inline-block — это чтоб он не растягивался на всю ширину и были кликабельными только слова, а не вся строка.

Текстовый маркер справа + простейшая анимация текста и маркера:

Как сделать спойлер в wiki

В новом примере я использую для маркера summary:after вместо summary:before, для того чтоб он отображался справа.

Анимация маркера при помощи transform: scale(1,-1);

Svg маркер + анимация поворота:

Как сделать спойлер в wiki

Summary:before пришлось серьезно переделать:

Ну и добавляем transform: rotateZ(90deg) для красивого поворота стрелки.

Если нам нужна svg иконка справа, то нужно поменять summary:before и вместо left поставить right.

Для summary поставить padding-right: 1.5em;

Как сделать спойлер в wiki

Давайте теперь сделаем один из наиболее распространенных примеров создания аккордиона, где будет иконка слева, фон, тени, эффекты:

Как сделать спойлер в wiki

Svg маркер справа + эффект зеркального поворота стрелки:

Как сделать спойлер в wiki

Теперь вы можете создавать красивые аккордионы, спойлеры и faq, без JavaScript, на чистом HTML5 и CSS.

Прежде чем убирать outline, 100 раз подумайте, чем вы можете его заменить, чтоб человек мог видеть фокус и мог перемещаться с клавиатуры или других устройств.

Если вам нужно, чтоб при открытии одного спойлера, закрывались остальные, то придется применить javascript, ниже привожу пример простого JS кода, который решит эту проблему.

С уважением, создатель конструктора лэндингов для фрилансеров CMS cPortfolio

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *