Как сделать спойлер с названием

В примере 1 показано использование элемента для создания спойлеров.

Пример 1. Спойлер, сделанный через

В браузерах IE и Edge элементы и не работают, текст спойлера в них отображается сразу же. Поэтому для универсальности рассмотрим альтернативную реализацию через псевдокласс :checked .

Пример 2. Структура спойлера

Внимание, спойлер! 
Убийца — дворецкий!
 

Сперва прячем и текст спойлера через свойство display со значением none .

.spoiler input, .spoiler div

А затем показываем его через псевдокласс :checked с помощью всё того же свойства display .

.spoiler :checked ~ div

Этого уже достаточно, чтобы при щелчке по ниже расположенный отображался и скрывался. Всё остальное это косметические детали для оформления. Добавим перед заголовком стрелку, как это реализовано в , через псевдоэлемент ::before и свойство content, значением которого будет символ стрелки, направленной вправо или вниз.

/* Закрытый спойлер */ .spoiler label::before < content: '►'; margin-right: 5px; >/* Открытый спойлер */ .spoiler :checked + label::before

Окончательный код продемонстрирован в примере 3.

Пример 3. Спойлер, сделанный через :checked

Результат данного примера в браузере Internet Explorer показан на рис. 2.

Рис. 2. Вид спойлера

Теперь наш спойлер работает во всех основных браузерах. К недостаткам метода следует отнести громоздкий код HTML — при добавлении нескольких спойлеров каждому внутри spoiler надо давать уникальный id и это же значение затем писать в атрибуте for для .

См. также

• display
• display в CSS
• relative и absolute
• Аккордеон меню
• Блочные элементы
• Вкладки на CSS
• Выпадающее меню
• Декоративные заголовки
• Добавление тени
• Использование :checked
• Использование в вёрстке
• Не только текст
• Описание float
• Открываем блочную модель
• Подробнее о позиционировании
• Псевдокласс :checked
• Псевдоэлемент ::before
• Псевдоэлементы
• Псевдоэлементы ::after и ::before
• Создание флексбоксов
• Стилизация переключателей
• Стилизация флажков
• Строчно-блочные элементы
• Строчные элементы
• Что это такое?

Как сделать спойлер с названием

Оформление сообщений на форуме

Важное замечание для новичков!
Не торопитесь опубликовать сообщение, сделайте предварительный просмотр, чтобы убедиться, что все выглядит так, как Вы хотели.
Для этого необходимо нажать кнопку «Предварительный просмотр», находящуюся внизу окна редактирования сообщения.
Если все получилось, можно нажать кнопку «Отправить».

Сообщение отредактировал CyberBob — 14.05.14, 09:23

Причина редактирования: убрал битую ссылку
20.07.10, 09:24 | #2
●

Почётный форумчанин
Реп: ( 5290 )

Что такое спойлер и как правильно использовать его в сообщениях?
Часто на форуме для уменьшения объёма сообщения применяют инструмент для сворачивания текста — спойлер. Он позволяет скрыть объёмные изображения и длинные тексты, при этом желающий ознакомиться с представленным материалом поближе может развернуть спойлер нажатием левой кнопки мыши по нему, при этом отображается всё содержимое спойлера. Далее подробно рассмотрены 2 типа спойлеров, использующихся на форуме. Вы можете использовать любой, в зависимости от ситуации.

ˇ Простой спойлер

Визуально спойлер представляет собой элемент разметки html-страницы, позволяющий свернуть текст и (или) изображение.
Кликнув на этот элемент, можно посмотреть его содержимое.
Например:

Здесь спрятан текст
Здесь картинка и текст

Чтобы спрятать под спойлер текст, делаем следующее.
После написания (или в процессе написания) сообщения, выделяем ту его часть,
которую хотим спрятать под спойлер, и нажимаем кнопку «Сделать текст сворачиваемым»:

1. Выделяем текст
2. Нажимаем кнопку, находящуюся в верхней панели редактора сообщения:

В результате в коде сообщения появляется следующая конструкция:

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

[SPOILER]Здесь спрятан текст[/SPOILER]

Как спрятать изображение под спойлер:
1. Прикрепляем изображение в сообщение как рассказывается в разделе Прикрепление файлов и их отображение этой темы.
2. Выделяем код, обозначающий прикреплённое изображения (включая начальную и конечную квадратные скобки).
3. Нажимаем кнопку «Сделать текст сворачиваемым»:

Полученная конструкция выглядит в сообщении следующим образом:

Спойлер с названием

Визуально этот элемент выглядит так:

Интересное внутри спойлера
Здесь спрятан текст и картинка

Для заголовка спойлера применимы все функции форматирования текста, такие как:
– толщина шрифта (жирный шрифт)
– наклонный шрифт
– подчеркнутый шрифт
– перечеркнутый шрифт
– размер шрифта
– цвет шрифта.
Например:

Возможные варианты оформления текстовой метки и не только 🙂
Здесь просто текст и он спрятан

Приведенный пример служит исключительно для демонстрации возможностей оформления спойлера и не должен использоваться как предмет подражания.

Сообщение отредактировал NuttShell — 13.04.14, 16:11

14.10.10, 10:43 | #3
●

Почётный форумчанин
Реп: ( 5290 )

Как получить ссылку на конкретное сообщение в теме?

Вы хотите подсказать, что искомый локскрин IPhone IOS4 Lockscreen опубликован в сообщении пользователя
Aidhz, которое находится в теме Темы для TouchFLO 3D, коллекция.
Многие просто копируют ссылку из адресной строки браузера и вставляют ее в свое сообщение,
что является неправильным решением.

http://4pda.to/forum/index.php?showtopic=92938&view=findpost&p=5373494
http://4pda.to/forum/index.php?showtopic=92938

означает, открыть на форуме 4PDA тему с номером «92938» — это уникальный идентификатор темы, который присваивается каждой теме при создании автоматически движком форума и не меняется даже при перемещении и переименовании темы. А код «&view=findpost&p=» означает «и отобразить сообщение с номером» 5373494. Номер сообщения, указываемый в URL адресе — это его уникальный идентификатор, присваиваемый автоматически движком форума.
При публикации сообщения редактор преобразует эту ссылку в «читабельный» вид и в готовом сообщении
ссылка будет отображаться как:
Темы для TouchFLO 3D, коллекция (Пост #5373494)

ˇКак поместить ссылку под определённый текст?
Задача:
Назначить гиперссылку произвольному тексту, например так — ссылка здесь
Решение:

– получаем адрес ссылки, как описано выше ( Простое решение )
– выделяем текст, которому хотим присвоить ссылку,
– нажимаем кнопку «Вставить гиперссылку» панели редактора:

– в отобразившемся окне вводим ссылку (Ctrl+V, либо — правая кнопка мыши — «Вставить»)
и соглашаемся, нажав кнопку ОК

Назначаем гиперссылку произвольному тексту, например так — ссылка [URL=http://devdb.ru/]здесь[/URL]

Назначаем гиперссылку произвольному тексту, например так — ссылка здесь

Сообщение отредактировал Семён — 22.11.11, 23:00

28.11.10, 13:10 | #4
●

Почётный форумчанин
Реп: ( 5290 )

Прикрепление файлов и их отображение.

Задача:
прикрепить файлы к сообщению и расположить их в сообщении.

Чтобы прикрепить к сообщению файлы, нажмите кнопку «Ответить»

Загрузка файлов на форум.
В правой стороне окна редактора есть группа элементов, позволяющая работать с прикрепленными файлами.

Для загрузки файла на форум нажмите кнопку «Обзор», при этом откроется стандартное диалоговое окно выбора файлов,
которые находятся у Вас на компьютере. После подтверждения выбора имя файла и полный путь появятся в поле слева от кнопки «Обзор».
Далее необходимо нажать кнопку «Загрузить», после чего выбранный Вами файл система загрузит на форум.

Все прикрепленные файлы данного сообщения отображаются в выпадающем списке «Управление текущими файлами».
В скобках () указывается общее количество прикрепленных к данному сообщению файлов.

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

– Изображения в форматах JPG, PNG, GIF.
– Архивы в форматах zip и rar
– Установочные файлы в формате САВ, ехе-файлы.

Каждому загруженному файлу соответствует сокращенная запись,
посмотреть которую можно в выпадающем списке «Управление текущими файлами».

Добавление вложения в сообщение.
В теле сообщения установите курсор туда, где Вы бы хотели чтобы располагался Ваш вложенный файл.
Затем кликните мышкой по списку «Управление текущими файлами» и нажмите на иконку с зеленым плюсом :

В результате редактор вставит в Ваше сообщение конструкцию вида:

[attachment=586353:1.jpg]

в редакторе это будет выглядеть следующим образом:

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

Название отображаемого файла будет точно таким же, как и загруженного вами.
Замечание. Название файла не должно содержать кириллических символов.

Удаление вложения в сообщении.
Если по какой либо причине вы хотите удалить уже загруженный на форум файл,
нажмите в списке «Управление текущими файлами» красный крестик слева от имени ненужного вам файла:

Отобразится окно с запросом на подтверждения удаления:

Перед тем, как отправить сообщение, сделайте его предпросмотр, нажав кнопку «Предварительный просмотр»:

И если Вас все устраивает, можно жать кнопку «Отправить»
Приятного общения!

Сообщение отредактировал romanmaks — 01.10.17, 12:08

Как сделать спойлер на странице. Тег

Тег используется для отображения скрытой информации. Его можно использовать для создания страницы FAQ, руководства пользователя или любых других блоков, где дополнительный контент должен быть скрыт до тех пор, пока его не запросит пользователь.

Атрибут open — указывает, должен ли блок быть раскрытым.

Примеры использования

 
Нажмите здесь, чтобы показать или скрыть подробности
 
Подробности о чём-то
 
 

Несколько раскрывающихся блоков:

 
Первый вопрос
 
Ответ
 
 
Второй вопрос
 
Ответ
 
 

Вложенные раскрывающиеся блоки:

 
Первый блок — нажмите здесь, чтобы показать или скрыть подробности
 
Какие-то подробности
 
Второй блок — нажмите здесь, чтобы показать или скрыть детали
 
Подробности о чем-то ещё
  

Для чего использовать тег

• Показать или скрыть дополнительную информацию.
• Создать страницу FAQ с раскрывающимися разделами.
• Добавить руководство пользователя с раскрываемыми разделами.
• Реализовать меню со сворачиваемыми подменю.
• Создать список с раскрываемыми элементами.
• Сделать форму со сворачиваемыми разделами.
• Реализовать фильтр со сворачиваемыми параметрами.

Нюансы

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Контейнер для чего угодно. Тег

Тег определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.

 
Заголовок секции
 
Какое-нибудь содержимое секции
 
 

• 6 октября 2023

Как добавить подпись в HTML. Тег

Устаревший атрибут align — выравнивание подписи относительно элемента .

Тег может использоваться только внутри элемента .

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

• 6 октября 2023

Метаданные HTML-страницы. Тег

Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.

Атрибуты тега :

• charset — кодировка символов в документе.
• name — имя метаданных.
• content — значение метаданных.
• http-equiv — HTTP-заголовок для значения атрибута content .

Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.

• 4 октября 2023

Просто кнопка. Тег

Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.

Атрибуты тега :

• name — имя кнопки.
• type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
• value — значение, которое будет отправлено на сервер при нажатии на кнопку.
• disabled — указывает, что кнопка должна быть отключена.
• form — одна или несколько форм, к которым принадлежит кнопка.
• formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
• formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
• formmethod — метод HTTP, используемый при отправке данных формы.
• formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
• formtarget — указывает, где отображать ответ после отправки формы.

• 4 октября 2023

Независимый контент. Тег

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

 
Заголовок статьи
 
Текст статьи.
 
 

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

Не используйте для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.

• 3 октября 2023

Как встроить страницу через

Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.

Простейший пример использования :

Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.

Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).

• 3 октября 2023

Выпадающий список. Тег

Тег используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.

Все опции списка должны быть обёрнуты в тег .

Атрибуты тега :

• autocomplete — подсказка для функции автозаполнения формы;
• disabled — делает элемент неактивным;
• form — связывает список с формой;
• multiple — позволяет выбрать несколько опций;
• name — задает имя элемента, которое будет отправляться на сервер;
• required — делает элемент обязательным для заполнения;
• size — задает количество строк в списке.

• 1 октября 2023

Встроенные CSS-стили для страницы с тегом

Тег используется для определения стилей для HTML-документов. Он является важным компонентом CSS, которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.

    body 
Добро пожаловать на мой сайт!
   

Атрибуты тега :

• type — MIME-тип таблицы стилей.
• media — типы носителей, для которы будет использоваться стиль.

• 29 сентября 2023

Изображение в HTML. Тег

Элемент используется для вставки изображений на веб-страницы.

У нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.

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

• 28 сентября 2023