Как сделать спойлер на форуме

Блок спойлера контента для записей в блогах

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

Как только вы установите нужный код, все, что нужно будет сделать, это разместить контент, который может содержать потенциальные спойлеры, в строку HTML .

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

Вам нужно будет выполнять минимум действий, после установки дополнения блока спойлера;
Решение работает на Blogger , WordPress . Оно реализовано на HTML и CSS , поэтому будет прекрасно работать на любых сайтах;
Ваши читатели используют мобильные устройства? Нет проблем, мы позаботились об этом. Им нужно просто нажать на блок спойлера, чтобы просмотреть скрытый контент;
Вы можете подобрать цвет в соответствии с цветовой схемой вашего блога.

Начнем

Перед тем, как сделать спойлер в HTML , нужно выполнить несколько подготовительных действий:

Создайте резервную копию своего шаблона Blogger . В случае если что-нибудь пойдет не так, сможете восстановить его предыдущую версию;
Откройте текстовый редактор.

Это руководство разделено на две части: добавление CSS , а затем настройка HTML . По ходу каждой из них мы будем размещать небольшие напоминания, чтобы вы не теряли нить происходящего.

Добавление CSS

Скрытие и отображение контента в спойлере происходит с помощью CSS . Ниже приводится CSS-код , который мы будем использовать. Его объем составляет менее 2 Кб . Это значит, что он не повлияет на производительность вашего блога:

Теперь выполните следующие действия:

Скопируйте весь приведенный выше код CSS спойлера для сайта HTML и вставьте его в текстовый редактор.
Перейдите в панель инструментов Blogger — Шаблон — Настройка — Дополнительно — Добавить CSS .
Вставьте CSS-код в текстовом поле с правой стороны, затем нажмите кнопку » Применить в блоге «.

После того, как вы добавили CSS , можно перейти к следующему разделу, в котором вы узнаете, как задействовать код, который мы только что добавили.

Вот разметка, которая нам нужна. Скопируйте ее код:

Это базовый код, который нам нужен. Конечно, вы захотите заменить » The quick brown fox jumps over the lazy dog «. В блок спойлера можно разместить все, что хотите: изображения, текст и даже видео.

Использование HTML

Внимательно выполните следующие действия, чтобы понять, как добавить спойлера HTML код :

Откройте запись или проект в панели инструментов Blogger ;
В верхнем левом углу редактора записей вы увидите две кнопки » Создать | HTML «, нажмите на кнопку HTML или пропустите предыдущий шаг, включив функцию » Интерпретировать введенный HTML » в настройках редактора записей. В правой боковой панели в разделе « Настройки записей », нажмите на кнопку « Параметры », а затем выберите пункт « Интерпретировать введенный HTML »;
Вставьте HTML в запись. После этого, если вы вставили код в режиме » HTML «, переключитесь обратно на » Создать «, и вы увидите в редакторе текст без каких-либо стилей. Не беспокойтесь, когда вы загрузите запись в блоге, стили блока спойлера HTML CSS будут применены автоматически.

Применение различных цветов

Можно применить различные цвета блока спойлера. На выбор предлагается 7 цветовых стилей:

Вы можете легко изменить цвет содержимого блока спойлера контента, добавив его название в class=»spoiler» . Смотрите пример ниже:

Цвет по умолчанию:

Нужно просто добавить название поддерживаемого цвета рядом с ключевым словом spoiler в атрибуте class .

Сгенерировать код блока спойлера

Не хотите писать код каждый раз, когда нужно добавлять блок спойлера HTML ? Используйте этот генератор , чтобы ввести контент и сразу получить код, он также работает на смартфонах!

Пожалуйста, оставьте ваши мнения по текущей теме статьи. За комментарии, отклики, лайки, дизлайки, подписки огромное вам спасибо!

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

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

Людям с ограниченными возможностями проще будет пользоваться вашим сайтом! Их софт (скринридеры и подобное) прекрасно понимает html5 теги и будет правильно обрабатывать их и правильно информировать людей о содержимом.
Улучшится связанность текста, и поисковики смогут более качественно индексировать сайт, так как будут лучше понимать, как связаны между собой видимый и скрытый текст.
Будет доступно управление элементами с клавиатуры и других устройств.
Уменьшается количество javascript кода, который нужно подгружать, что увеличивает скорость загрузки страницы, скорость обработки и корректность.
Улучшаются показатели в Lighthouse, Google PageSpeed и других подобных инструментах.
Работает при выключенном javascript.

Старые браузеры не знают таких тегов и не будут скрывать информацию.

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

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

Старые браузеры его не видят.
Вебкит баузеры не позволяют менять символ маркера.

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

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

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

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

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

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

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

Всем элементам, которые находится после summary, ставлю анимацию плавного появления при помощи animation: sweep .5s ease-in-out;

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

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

Поставить position: absolute; left: .3em; top: .4em; width: 1em; height: 1em;
Текстовому маркеру надо обязательно поставить color: transparent; иначе он будет виден.
Картинку вешаем при помощи background.

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

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

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

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

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

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

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

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

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