ZorNet.Ru — сайт для вебмастера » HTML и CSS » Сделать собственный спойлер для сайта

Сделать собственный спойлер для сайта

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

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

Ранее уже на сайте размещал сполер, но там все похоже идет, только вместо кнопки заголовок.

Приступаем к установке:

Изначально стили в CSS:

Код

button {
  outline: none;
}

.text {
  display: block;
  width: auto;
  height: 50px;
  padding: 5px;
  margin-top: 5px;
  outline: none;
  overflow: hidden;
}

.text:focus,
button:focus ~ .text {
  height: auto;
}

Теперь остается заключить. то что вы по умолчанию решили скрыть, но как поняли, по клмку все станет открытым.

Код

<div class="block">
  <button>Кнопка</button>
  <div class="text" tabindex="0" style="cursor:pointer">
  Здесь пишем текст чтоб он был виден, не менее 120 знаков, где только после него можно прописывать элементы.
  </div>
</div>

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

17 Ноября 2017 Просмотров: 1134 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0