Разворачивающийся блок css: html — Раскрывающиеся блоки с скрытым содержанием

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

Здравствуйте уважаемые начинающие веб мастера.

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

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

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

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

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

Примеры:

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

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

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

 
Код:

Html

<div>Бла-бла-бла-бла-бла-бла <input type="checkbox"/>
<label for="hd-1" >Справка</label> бла-бла-бла-бла-бла-бла
<span>
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
</span>
<div>

Css

. 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 тот-же что и в первом примере.

Css

.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. <details></details> — контейнер, который можно развернуть и свернуть.

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

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

Заголовок

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

 

Код:


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


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

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

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

В раздел >>>

, — HTML — Дока

1. Кратко
2. Пример
3. Как понять
4. Как пишется
5. Подсказки
6. На практике
   1. Лена Райан советует
   2. Татьяна Фокина советует

Кратко

Секция статьи «Кратко»

Блок с раскрывающимся контентом на чистом HTML.

Пример

Секция статьи «Пример»

Самый простой раскрывающийся блок выглядит вот так:

<details>  <summary>Легенда</summary>  <p>Раскрывающийся текст</p></details>
          <details>
  <summary>Легенда</summary>
  <p>Раскрывающийся текст</p>
</details>

Открыть демо в новой вкладке

Как понять

Секция статьи «Как понять»

Иногда нужно скрывать какую-то информацию на странице в специальном блоке. Чтобы в любой момент можно было кликнуть на этот блок и развернуть информацию. И свернуть обратно таким же кликом. Такой блок ещё называют «аккордеоном».

Как пишется

Секция статьи «Как пишется»

Тег <details> — это интерактивный элемент, при нажатии на который открывается блок с информацией — текстом или картинками. Нередко такие элементы можно встретить на страницах с часто задаваемыми вопросами (FAQ), где в заголовке (или легенде) написан вопрос, а ответом является содержимое «аккордеона».

Тег <summary> — это заголовок «аккордеона», так называемая легенда. Он необязателен — без него в качестве легенды будет написан текст «Подробнее», «Details» или нечто подобное — в зависимости от выбранного языка и браузера.

Собирается «аккордеон» очень просто: в <details> вкладываем <summary> и теги с информацией, которая будет показываться при нажатии.

По умолчанию «аккордеон» закрыт, но если мы хотим, чтобы его содержание показывалось сразу при загрузке страницы или открывать его из JavaScript, нужно добавить к нему атрибут open.

<details open>  <summary>Легенда</summary>  <p>Раскрывающийся текст</p></details>
          <details open>
  <summary>Легенда</summary>
  <p>Раскрывающийся текст</p>
</details>

Открыть демо в новой вкладке

Подсказки

Секция статьи «Подсказки»

💡 Можно вкладывать <details> в <details>.

💡 <details> — это интерактивный элемент, но вкладывать другие интерактивные элементы в него можно.

💡 В HTML-стандарте написано, что <summary> должен быть первым ребёнком в <details>, но на деле всё прекрасно работает, даже если <summary> находится между тегами содержательной части «аккордеона».

💡 Вёрстка не ломается, если вложить <summary> в <summary> — в таком случае будет только один элемент ::marker (треугольник перед легендой).

💡 Если в «аккордеоне» будет несколько <summary> подряд, браузер будет реагировать только на первый, а остальные даже не отобразятся, хотя будут стоять в разметке.

💡 Если указать просто <summary> без <details>, то он будет вести себя как обычный <div> — блочный элемент без интерактивности.

На практике

Секция статьи «На практике»

Лена Райан советует

Секция статьи «Лена Райан советует»

🛠 Если присутствует тег <summary>, то псевдоэлемент ::marker можно стилизовать — правда, он реагирует не на все свойства, но как минимум вы сможете поменять цвет и размер шрифта. Раньше для его стилизации нужно было использовать ::-webkit-details-marker.

Татьяна Фокина советует

Секция статьи «Татьяна Фокина советует»

🛠 Можно заменить иконку по умолчанию с помощью

<img>. В этом случае оставьте значение атрибута alt пустым, так как это декоративное изображение.

<details open>  <summary>    <img src="images/arrow-down.svg" alt="">    Сроки доставки  </summary>  <p>Если закажите экспресс-доставку голубями, она займёт от 6 до 8 дней. Обычная доставка улиткой занимает примерно 20 дней.</p></details>
          <details open>
  <summary>
    <img src="images/arrow-down.svg" alt="">
    Сроки доставки
  </summary>
  <p>Если закажите экспресс-доставку голубями, она займёт от 6 до 8 дней. Обычная доставка улиткой занимает примерно 20 дней.</p>
</details>

Открыть демо в новой вкладке

🛠 У <summary> есть встроенная роль button. На практике скринридеры определяют роль тега по-разному. NVDA считает его кнопкой, Narrator — раскрывающим треугольником (disclosure triangle), десктопный VoiceOver — саммари (summary), а TalkBack в Firefox и мобильный VoiceOver в Safari вообще не определяют роль

<summary>.

Можно использовать явную роль button для <summary>, но так лучше не делать:

• Это не та ситуация, где стоит явно задавать ARIA-роль и нарушать одно из правил использования WAI-ARIA.
• VoiceOver перестанет определять состояние <details> — развёрнут или свёрнут элемент.
• Не решит проблему с неопределяемой ролью <details> для TalkBack в Firefox и мобильного VoiceOver в Safari.

🛠 Если заменить на свою иконку с треугольником по умолчанию у <summary>, это может привести к проблемам с объявлением VoiceOver, NVDA и JAWS состояния, в котором сейчас находится элемент.

🛠 В Firefox есть баг, из-за которого VoiceOver читает название иконки по умолчанию и считает его частью имени элемента — краткого названия, которое скринридеры объявляют вместе с ролью.

🛠 VoiceOver в Safari и JAWS в Chrome, Edge или Firefox не считают <h2>–<h6> заголовками, если они вложены в <summary>.

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

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

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<embed>

alt + ←

→

<meter>

alt + →

html — Как создать автоматически расширяющийся блок

Задавать вопрос

спросил 12 лет, 9 месяцев назад

Изменено 12 лет, 9 месяцев назад

Просмотрено 2к раз

Мне нужно создать однострочный макет с тремя колонками. Левый и правый столбцы должны отображать по одному слову без усечения (они должны расширяться и сжиматься, чтобы соответствовать слову). В центральном столбце должна отображаться потенциально длинная строка, усеченная так, чтобы она помещалась между двумя столбцами.

Вот немного HTML, чтобы передать идею:

 

  
Слева
  
Центр Центр Центр Центр Центр Центр Центр Центр
  
Справа

 

И соответствующий CSS:

 .container {
  пробел: сейчас;
}
.оставил {
  отображение: встроенный блок;
}
.центр {
  отображение: встроенный блок;
  переполнение: скрыто;
}
.Правильно {
  отображение: встроенный блок;
}
 

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

Что-то вроде center.width = container.width — left.width — right.width

Есть идеи? Спасибо

---

РЕДАКТИРОВАТЬ: Решено с небольшими изменениями в ответе ianhirschfeld .

HTML:

 

  
Слева
  
ПравоПравоПраво
  
Центр Центр Центр Центр Центр Центр Центр Центр

 

CSS:

 .container {
  пробел: nowrap;
  переполнение: скрыто;
}
.оставил {
  плыть налево;
}
.центр {
  переполнение: скрыто;
}
.Правильно {
  поплавок: справа;
}
 

• html
• css

В зависимости от того, как вы это реализуете, вот что вы можете попробовать:

• Установите высоту класса контейнера
• Установить float:left на .left и float:right на .right
• Поместите элементы div .left и .right в центральный элемент div перед его содержимым

.container {
высота: 30 пикселей;
переполнение: скрыто;
}
.left {
отображение: встроенный блок;
фон: #b9фф67;
поплавок: левый;
}
.center {
ширина: 100%; дисплей
: встроенный блок;
переполнение: скрыто;
фон: #9ac0ff;
}
. right {
display: inline-block;
фон: #ffc8c8;
поплавок: правый;
}

 <дел>
<дел>
    
Слева
    
ПравоПравоПраво
    Центр Центр Центр Центр Центр Центр Центр

 .center { overflow: hidden; }
 

 

  
Слева
  
ПравоПравоПраво
  
Центр Центр Центр Центр Центр Центр Центр Центр

 

 
Переключить
 

<тип ввода="флажок"/>
<дел>
  
Здесь просто случайный контент.