Как сделать раскрывающийся текст в html

Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

Сообщения: 537
Благодарности: 12

Да это то я читал
Вопрос видимо некорректно поставил .
Тогда так спрошу: я (предположим ) хочу создать в блокноте HTML документ. И там мне надо какой то текст спрятать (на форумах это называется «спойлер»), т.к. его очень много. Можо ли это сделать также как предположим . бегущую строку . или .
Можно ли вот так сделать, безо всяких «наворотов» ?
з.ы. Сейчас вроде попонятней задал вопрос

Сообщения: 6664
Благодарности: 1294

Конфигурация компьютера
Процессор: Intel Core i5-6500 3.20ГГц
Материнская плата: GIGABYTE «GA-H170M-D3H»
Память: 2×8ГБ DDR4 Kingston HyperX FURY Black Series HX421C14FBK2/16
HDD: SSD диск 256ГБ 2.5″ Plextor «M5S» + WD Red IntelliPower 1Tb [WD10EFRX]
Видеокарта: GTX 1660 SUPER 6Гб
ОС: Windows 10 Pro x64

�� VoiceOver в Safari и JAWS в Chrome, Edge или Firefox не считают – заголовками, если они вложены в .

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

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

Раскрывающиеся блоки для подсказок или дополнительной информации

Очень часто возникает необходимость разместить на странице подсказку или дополнительную информацию к какому либо слову, словосочетанию или абзацу.

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

Объектом для клика может быть выделенная часть текста или кнопка «Справка» размещёная в удобном месте.

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

При повторном клике на выделенный текст или кнопку, вкладка с подсказкой закроется.

1. Выделенная часть текста.

Бла-бла-бла-бла-бла Справка бла-бла-бла-бла-бла

Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла

< div class color: #008080;">spravca «>Бла-бла-бла-бла-бла-бла < input type color: #008080;">checkbox » id color: #008080;»>hd-1 » class color: #008080;»>reference «/>
< label for color: #008080;">hd-1 » >Справка < /label >бла-бла-бла-бла-бла-бла
< span class color: #008080;">story «>
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
< /span >
< div >

.reference <
display : none ;
>
.reference ~ .story <
display : none ;
>
.reference + label <
font-size : 16px ;
padding : 0 ;
color : green ;
cursor : pointer ;
display : inline-block ;
>
.reference:checked ~ .story <
display : block ;
background : Snow ;
padding : 10px ;
>

2. Кнопка, которую можно разместить в любой части контента.

Бла-бла-бла-бла-бла Справка бла-бла-бла-бла-бла

Html тот-же что и в первом примере.

.reference <
display : none ;
>
.reference ~ .story <
display : none ;
>
.reference + label <
position : absolute ;
top : 0 ;
left : 200px ;
border : 1px solid #333 ;
border-radius : 4px ;
background : #F0FFF0 ;
padding : 3px ;
color : green ;
font-size : 16px ;
cursor : pointer ;
display : inline-block ;
>
.reference:checked ~ .story <
display : block ;
background : Snow ;
padding : 10px ;
>
.spravca <
position : relative ;
>

Можно дополнительно оформить раскрывающиеся блоки в css под стиль вашего сайта.

В HTML5 похожая опция заложена по умолчанию.

Реализуется она тегами

1. — контейнер, который можно развернуть и свернуть.

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

Смотрится и работает эта опция так:

текст текст текст текст

< detail s>
< summary >Заголовок< /summary >
текст текст текст текст
< /details >

Теги details и summary по умолчанию блочные элементы, поэтому, если нужно вставить контейнер в строку, ему нужно будет задать свойство display: inline-block;

Можно так же задать и другое стилевое оформление.

Желаю творческих успехов.

А ну-ка, что там ещё интересного

Раскрывающийся блок

Инструкция о том, как сделать раскрывающийся по клику блок.

Нажмите здесь для детальной информации

Всё очень просто! Достаточно:

Создать новый div с уникальным id , например, id=»my_div» .
Создать новую ссылку (кнопку) и задать id как у блока, только с префиксом sw_ , в данном случае: id=»sw_my_div» .
Добавить на ссылку класс cm-combination .

Пример. Создайте HTML блок с кодом:

   Я вас люблю, хоть и бешусь,
 Хоть это труд и стыд напрасный,
 И в этой глупости несчастной
 У ваших ног я признаюсь!

Иконки переключатели или «Вкл/Выкл»

Можно использовать иконки или кнопки «Вкл/Выкл», для этого используются id для ссылок:

on_[id_блока] — открыть
off_[id_блока] — закрыть

[id_блока] — уникальный id блока который нужно открывать/закрывать

Пример. Два раскрывающихся блока. Один с помощью иконки, второй текстовыми ссылками. Также, возможно использовать изображения

 Без вас мне скучно, — я зеваю;
 При вас мне грустно, — я терплю;
 И, мочи нет, сказать желаю,
 Мой ангел, как я вас люблю!  
 Выкл.  Когда я слышу из гостиной
 Ваш легкий шаг, иль платья сум,
 Иль голос девственный, невинный,
 Я вдруг теряю весь свой ум.

Одновременное использование нескольких переключателей

$block.block_id>" больше $block.block_id>" cm-combinations"> $block.block_id>" cm-combinations hidden"> $block.block_id>" > Вы улыбнетесь — мне отрада;
 Вы отвернетесь — мне тоска;
 За день мучения — награда
 Мне ваша бледная рука.

— id блока, доступен в SMARTY блоках.

Содержание

Администратору

Русская версия CS-Cart

Разработка и модификация
- Инструменты и шпаргалки
  - Режим разработки и отображение ошибок
  - Работа с базой данных MySQL. Плейсхолдеры и функции
  - addon.xml — главный файла модуля
  - Расширение функционала ядра с помощью хуков
  - Шаблоны и блоки
    - Pop-up (вплывающие окна)
    - Раскрывающийся блок
    - Часто задаваемые вопросы
    Сейчас
    - Раскрывающийся блок
      - Нажмите здесь для детальной информации
      - Иконки переключатели или «Вкл/Выкл»
      - Одновременное использование нескольких переключателей
      Похожие публикации:
      
      Как включить переводчик в дискорде
      
      Как обновить apple watch 3 без телефона
      
      Как обрезать углы в css
      
      Как стилизовать checkbox css

Как сделать раскрывающийся текст в html