Спойлер на css: красивые плавные спойлеры через тег details (без JS)

12 примеров, в которых вам не нужен JavaScript

В наши дни CSS развивается очень быстрыми темпами и может полностью заменить традиционные способы реализации многих классических веб-фишек, для которых обычно использовался JavaScript. Приводим примеры некоторых из них.

Раскрывающийся спойлер / Accordion

Карусель

Переворот по клику

Всплывающие подсказки при наведении или клике

Выпадающее многоуровневое меню

Модальные окна и попапы

See the Pen Popup/Modal without JS by Paul (@peiche) on CodePen.

Переключаемые вкладки

See the Pen Tabs CSS & HTML, no JS & Jquery by llgruff (@llgruff) on CodePen.

Красивые поля ввода текста

See the Pen Pure CSS Floating Label Textfield by Matthias Benkort (@KtorZ) on CodePen.

Древовидный список

See the Pen Pure CSS Tree by Rafael González (@rgg) on CodePen.

Игры на чистом CSS и HTML

See the Pen Zero lines JS game by Alexander Majorov (@i0z) on CodePen.

See the Pen Sudoku without JS by Tab Atkins (@TabAtkins) on CodePen.

Свои примеры скидывайте в комментарии в виде короткого описания и ссылок на codepen. io или jsfiddle.net, мы будем обновлять статью.

Как сделать спойлер раскрытым по умолчанию

Есть симпатичный спойлер на JavaScript. Преимущества: минимум кода в ноде, любое количество на странице, при открытом спойлере закрывается по клику как сверху, так и снизу, что удобно при больших текстах в ноде.

По умолчанию спойлер закрыт. Но вот понадобилось добавить и открытый. То есть на странице по умолчанию будут как закрытые спойлеры, так и открытые.

Кто может помочь — отзовитесь. Буду очень благодарен. Сверстано с этим спойлером уже много. Переходить на другой — сплошной геморой.

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

HTML код спойлера

<div title=»Текст заголовка спойлера»>
Содержимое спойлера, которое нужно скрыть.
</div>

JavaScript спойлера

<script>
var spoilers = document.getElementsByClassName(‘spoiler’);
for(var i = 0;i<spoilers.length;i++)
{
 var spoiler=spoilers[i];

 var title = spoiler.title;
 spoiler.title = »;

 var text = spoiler.innerHTML;
 spoiler.innerHTML = »;

 var divTitle = document.createElement(‘div’);
 divTitle.className = ‘spoilerTitle’;
 divTitle.innerHTML = title;
 divTitle.onclick=function(){
 $(this).next().slideToggle(1000);
 }
 spoiler.appendChild(divTitle);

 var divBody = document.createElement(‘div’);
 divBody.className = ‘spoilerBody’;
 divBody.innerHTML = text;
 spoiler.appendChild(divBody);
 
 var divBottom = document.createElement(‘div’);
 divBottom.className = ‘spoilerBottom’;
 divBottom.innerHTML = ‘Свернуть’;
 divBottom.onclick=function(){
 $(this).parent().slideToggle(1000);
 }
 divBody.appendChild(divBottom);
}
</script>

CSS стили спойлера

/* Спойлер на сайте */
. spoiler{
 font-size: 14px;
 border: #c3cbd1 1px solid;
 border-radius: 10px;
 background: #e9e9e6;
}
.spoilerTitle{
 cursor: pointer;
 margin: 2px 5px;
}
.spoilerBody{
 display: none;
 padding: 2px 5px;
 background: white;
 border-radius: 0 0 10px 10px;
}
.spoilerBottom{
 padding: 0 5px;
 cursor: pointer;
 margin: 0 -5px -2px -5px;
 border-top: #c3cbd1 1px solid;
 border-radius: 0 0 10px 10px;
 background: #e9e9e6;
}
/* Спойлер на сайте КОНЕЦ*/

Вживую посмотреть можно здесь: Продвинутый спойлер

Анимированный спойлер для изображений при помощи SVG и CSS

Решил немного поиграться с CSS-анимацией и SVG. Идея следующая: сделать спойлер для изображений в виде шторок, раздвигающихся при наведении.

Я нарисовал эскиз в Adobe XD и экпортировал в SVG.

Надо сказать, что Adobe XD генерирует довольно грязный, на мой взгляд, код SVG. Вот содержимое файла изображения после экспорта:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300.001">
  <g data-name="Group 2" transform="translate(0)">
    <path data-name="Path 4" d="M175,300H0V0h320L201.915,120.561c-.629-.04-1.273-.061-1.916-.061a29.5,29.5,0,0,0-6.807,58.21L175,300Z" fill="#ff8c00"/>
    <path data-name="Path 5" d="M175,300H0V0h320L201.915,120.561c-.629-.04-1.273-.061-1.916-.061a29.5,29.5,0,0,0-6.807,58.21L175,300Z" transform="translate(400 300.001) rotate(180)" fill="#00bfff"/>
    <g data-name="Group 1">
      <path data-name="Path 6" d="M25,0A25,25,0,1,1,0,25,25,25,0,0,1,25,0Z" transform="translate(175 125)" fill="gray"/>
      <path data-name="Path 7" d="M1.718,13.2h30.867l-7.809-30H8.573l7.01,26.736H.867Z" transform="translate(195.133 146.805)" fill="#fff"/>
      <path data-name="Path 8" d="M1.718,13.2h30.867l-7.809-30H8. 573l7.01,26.736H.867Z" transform="translate(205.867 153.195) rotate(180)" fill="#fff"/>
    </g>
  </g>
</svg>

Такой вариант меня не устраивал. В поисках решения я наткнулся на неплохую бесплатную утилиту для оптимизации SVG-изображений SVGOMG. Её можно скачать и установить локально из репозитория на GitHub, но она также доступна онлайн.

Вот результат оптимизации:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300">
  <g data-name="Group 2">
    <path data-name="Path 4" d="M175 300H0V0h320l-18 120.6-2-.1a29.5 29.5 0 00-6.8 58.2L175 300z" fill="#ff8c00"/>
    <path data-name="Path 5" d="M225 0h275v300h280l18-120.6 2 .1a29.5 29.5 0 006.8-58.2L225 0z" fill="#00bfff"/>
    <g data-name="Group 1">
      <path data-name="Path 6" d="M200 125a25 25 0 11-25 25 25 25 0 0125-25z" fill="gray"/>
      <path data-name="Path 7" d="M196.9 160h316l-7.8-30h-4.5l7 26.7h296z" fill="#fff"/>
      <path data-name="Path 8" d="M204.1 140h285l7.8 30h5.5l-7-26.7h305z" fill="#fff"/>
    </g>
  </g>
</svg>

Выглядит намного лучше 🙂 Осталось наложить SVG на какую-нибудь картинку и добавить анимацию отдельных элементов (path, g) посредством CSS.

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

See the Pen Capsule by Kei (@RiseLab) on CodePen.dark

Изначально я хотел использовать @keyframes и animation, однако свойства transition здесь оказалось вполне достаточно. Тема выбора между использованием анимаций (animation) и переходов (transition) выходит за рамки данной статьи, но если коротко: animation стоит применять в тех случаях, когда возможностей transition оказывается недостаточно.

В качестве небольшой оптимизации я вынес в JavaScript-код функционал автоматического добавления анимированного SVG внутрь всех элементов с классом capsule.

See the Pen Capsule JS by Kei (@RiseLab) on CodePen.dark

Теперь достаточно поместить изображение (или любой другой контент) в контейнер с этим классом (например <div></div>) и анимированный спойлер будет наложен автоматически 😎

Данный спойлер нельзя назвать универсальным, он разрабатывался в первую очередь для изображений внутри контента (они как правило имеют соотношение сторон 4:3 либо 16:9). Он будет некорректно отображаться на изображениях (или прямоугольных блоках с другим содержимым) с соотношением сторон меньшим, чем 4:3 (попробуйте уменьшить ширину окна браузера до 400px и посмотрите, как будет отображаться этот блок). Также не стоит накладывать его на сильно вытянутые по ширине блоки, например на блоки текста из нескольких строчек.

Код JavaScript также можно развить до отдельного компонента (например для Vue), получающего содержимое анимации в качестве параметра.

Тем не менее цель я считаю достигнутой, а вёрстку и код всегда можно доработать под конкретную задачу 😉

Табы, Спойлер и Аккордеон для Joomla

Возможности плагина Tabs & Sliders & Spoilers

Простой плагин для Joomla 2.5–3.x, с помощью которого можно выполнить простые манипуляции с контентом: плагин организации группирования контента во вкладки, стайлеры и спойлеры для Joomla.

Данный плагин работает не только с компонентом Content в полном материале. Может работать в любом компоненте, который поддерживает контентные плагины, например, в JoomShopping. Основной позитив: простота использования, понимание html и css, «три в одном», бесплатность.

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

Как оно выглядит

заголовок вкладки 1

текст вкладки и картинка (html и классы css не возбраняются)

заголовок вкладки 2

текст вкладки 2. Для эстетичного «внешнего вида» стоит сделать картинки или див-ы одной высоты для каждого слайда.

заголовок вкладки 3

текст вкладки 3

Спойлер мне уже потребовался и для него css был «перепилен». Стили для плагина правятся легко и просто обычной правкой стилей и могут быть реализованы как нужно, «под проект».

Настройки

Простейшие настройки выполняются через панель управления Плагины, стили правим в css шаблона.

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

Использование тегов, синтаксис

Табы 	Слайды 	Спойлер

{tab=заголовок вкладки 1}
текст вкладки  (html и классы css не возбраняются)
{tab=заголовок вкладки 2}
текст вкладки
{tab=заголовок вкладки 3}
текст вкладки
{/tabs}
	

{slider=заголовок слайда 1}
текст
{slider=заголовок слайда 2}
текст
{/sliders}
	

{spoiler=заголовок спойлера}
текст
{spoiler= еще спойлер}
текст
{/spoilers}

Сайт разработчика joomext.ru; Плагин Tabs & Sliders & Spoilers (скачать)

Добавить комментарий

— HTML | MDN

HTML-элемент <details> используется для раскрытия скрытой (дополнительной) информации.

Виджет раскрытия обычно представлен на экране с использованием небольшого треугольника, который поворачивается, чтобы показать состояние открытия / закрытия, с меткой рядом с треугольником. Если первый дочерний элемент элемента <details> является <summary>, содержимое элемента <summary> используется в качестве метки для виджета раскрытия.

The source for this interactive example is stored in a GitHub repository. If you’d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Элемент поддерживает только глобальные атрибуты.

open

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

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

<details open>
  <summary>Even more details</summary>
  <p>Here are even more details about the details.</p>
</details>

Result

Примечание: Если приведённый выше пример не работает, см. Browser compatibility , чтобы определить поддерживает ли вообще ваш браузер эту функцию. 

Следуя более новой спецификации, Firefox отображает элемент summary как display: list-item  и маркер можно стилизовать так же, как и элементы списка.

Следуя более старой спецификации, в Chrome and Safari существует пользовательский псевдо-элемент ::-webkit-details-marker, с помощью которого можно стилизовать маркер. 

Для кроссбраузерной стилизации маркера, чтобы скрыть дефолтный и добавить кастомный, необходимо для Firefox установить элементу summary {display: block;}, а для Chrome и Safari’s установить ::-webkit-details-marker {display: none;}. После этого дефолтный маркер будет скрыт, после чего можно установить свой маркер любым доступным способом стилизации. В примере ниже с помощью псевдоэлементов маркер возвращается обратно.  

HTML

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

CSS

summary {
  display: block;
}

  summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: '\25B6';
  padding-right: 0.5em;
}

details[open] > summary::before {
  content: '\25BC';
}

Result

CSS Shorts: спойлеры | Learn2Dev

15.12.2020 | Читать 5 мин.

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

Установка

Мы будем использовать только обычные HTML, CSS и JavaScript, которые, я полагаю, вы уже знаете, как настроить. Если нет, перейдите на CodePen и создайте новое перо. Там же вы можете найти готовый проект и исходный код. У меня на CodePen по умолчанию включены несколько параметров (SCSS, Babel, Normalize.css), но я не использую ни один из них в этом руководстве. Единственный исходный код настройки, который я добавил, — это одна строка в CSS, чтобы дать себе немного места.

 
тело {
  набивка: 1 бэр 2 бэр;
}  

CSS Спойлер

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

Код

HTML

  
 CSS Hover Spoiler / Text Spoiler 

  Чистый раскрывающий спойлер CSS, который
  
    кликабельно, с вкладками и с возможностью зависания
  
  

  Lorem ipsum dolor, sit amet conctetur adipisicing elit.Ипсум
   blanditiis molestiae eligendi 
  нет. Ullam doloribus quibusdam at facilis atque! Dolorum praesentium eveniet
  dicta ullam, aperiam dignissimos voluptate incidunt enim maiores.
  

Для HTML мы добавляем текст-заполнитель, и чтобы часть его была скрыта внутри спойлера, мы хотим заключить его в диапазон с классом spoiler-text и, что важно, tabindex = " 0 ", что позволяет нам перейти к нему, щелкнуть по нему и придать ему соответствующий стиль.

CSS

  .spoiler-text {
  фон: черный;
  цвет: прозрачный;
  курсор: справка;
  выбор пользователя: нет;
  переход: фон 0,3 с, затухание 0,2 с, цвет 0,2 с, затухание 0,25 с;
}

.spoiler-text: наведите указатель мыши,
.spoiler-text: focus {
  фон: # e8e8e8;
  цвет: наследовать;
}  

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

курсор: справка; изменяет курсор с значка выбора текста на вопросительный знак, показывая, что наш «черный ящик» что-то делает при щелчке мышью или при наведении на него указателя мыши. Это только стилистический выбор, и вы можете попробовать cursor: pointer; вместо этого.

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

Переходя к следующей части, у нас есть псевдоселекторы : hover и : focus . Наведение происходит, когда вы наводите указатель мыши на текст спойлера, а фокус происходит, когда вы либо щелкаете по нему, либо «вкладка» на нем. Фокус может произойти только в том случае, если вы добавили tabindex = "0" в HTML. Попробуйте удалить селектор наведения, чтобы увидеть разницу.

Наконец, то, что мы делаем, когда пользователь наводит или «фокусирует» спойлер, очень просто. Убираем черный фон и меняем цвет текста.Можно было бы сказать цвет: черный; вместо цвет: наследовать; , но это сразу усложняет повторное использование, скажем, темного фона. inherit указывает браузеру использовать тот же цвет, что и окружающий текст. Попробуйте изменить фон на , наследовать или без , поскольку в настоящее время он жестко запрограммирован на этот серый цвет.

Еще одна доработка, которую мы можем сделать, — это сгладить переход между скрытым и раскрытым спойлером, чтобы он не происходил мгновенно.Это то, что происходит с переходом : фон 0,3 с ослабляет 0,2 с, цвет 0,2 с ослабляет 0,25 с; для. Он меняет цвет фона в 0,3 секунды, с плавной функцией синхронизации easy и задержкой 0,2 секунды , чтобы дать пользователю время отменить раскрытие спойлера. Он также меняет цвет текста, и чтобы получить эти значения, вам нужно просто попробовать несколько случайных значений и поэкспериментировать, но обычно вы никогда не подниметесь выше 0,3 с для переходов.

Плюсы

Минусы

• Устройства чтения с экрана могут испортить все
• Лучше всего использовать только для текста

Тег HTML Details

Если вам нужен спойлер, который больше похож на вкладку или блок контента, то можно использовать тег HTML

.

Код

  
 Тег сведений HTML 
<подробности>
  Чистый HTML без каких-либо стилей. Обратите внимание, что текст по умолчанию имеет значение «Подробности», когда
  мы не предоставляем тег  & lt; summary & gt; .

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

  <подробности>
  
 Ключ ответа 
  

    Это стилизованный тег  & lt; details & gt; . Обратите внимание, что открытие / закрытие
    не могут быть анимированы / перенесены напрямую без жесткого кодирования высоты для
    пример.
  
  

    
 А 
    
 D 
    
 В 
    
 Б 
    
 В 
  

Для этого мы добавили класс spoiler-details к тегу

 
.spoiler-details {
  граница: сплошная 1px #bbb;
  радиус границы: 5 пикселей;
  набивка: 0,5 бэр;
  запас: 0,5 бэр;
  максимальная ширина: 50%;
  минимальная ширина: 300 пикселей;
}


.spoiler-details summary {
  курсор: указатель;
  font-weight: жирный;
  стиль списка: нет;
  набивка: 0,25 бэр;
}


.spoiler-details [открыть] сводку {
  нижняя граница: сплошной 1px #bbb;
}  

  <подробности>
  
 Анимированные детали 
  
 Этот блок деталей имеет анимированную "вспышку" мягкой непрозрачности 
  

    
      Вы также можете добавить более сложные анимации, такие как эффекты скольжения (но
      в таких случаях вы, вероятно, не стали бы использовать рамку)
    
  

 
@keyframes flash {
  0% {
    непрозрачность: 0,5;
  }
  100% {
    непрозрачность: 1;
  }
}


@keyframes slide {
  0% {
    маржа слева: -50%;
    непрозрачность: 0;
  }
  100% {
    маржа слева: наследовать;
    непрозрачность: 1;
  }
}  

  .spoiler-details.animated [open] {
  анимация: вспышка 0,5 с, плавность установки;
}

.spoiler-details.animated [открыть] .content {
  непрозрачность: 0;
  анимация: слайд 0,5 с 1 с легкость открытия;
  режим заливки-анимации: вперед;
}  

  
 Спойлер JavaScript 
 Самый гибкий вариант, но он требует дополнительной работы. 

<диапазон
 
  aria-label = "Спойлер"
  ария-расширенный = "ложь"
  tabindex = "0"
  роль = "кнопка"
>
  
    Джар Джар Бинкс - лорд ситхов.Повторное нажатие переключит спойлер.
  





<диапазон
 
  aria-label = "Спойлер"
  ария-расширенный = "ложь"
  tabindex = "0"
  роль = "кнопка"
>
  
    Уилсон не выживает . .. и теперь вы никогда не сможете закрыть этот спойлер
  
  

  .js-spoiler {
  фон: # e8e8e8;
}

.js-spoiler.hidden {
  фон: черный;
  курсор: указатель;
  радиус границы: 3 пикселя;
}

.js-spoiler.hidden span {
  непрозрачность: 0;
  выбор пользователя: нет;
}  

 



const jSpoilers = [... document.getElementsByClassName ("js-spoiler")];





jSpoilers [0].addEventListener («щелчок», handleSpoiler);


jSpoilers [1] .addEventListener ("клик", handleSpoiler, {once: true});  

  function handleSpoiler (evt) {
  
  константная оболочка = evt.currentTarget;

  
  wrapper.classList.toggle («скрытый»);
}  

  function handleSpoiler (evt) {
  
  константная оболочка = evt.currentTarget;
  
  const content = wrapper.children [0];

  
  wrapper.classList.toggle («скрытый»);

  
  if (wrapper.classList.contains ("скрытый")) {
    wrapper.setAttribute ("расширенная ария", ложь);
    wrapper.setAttribute («роль», «кнопка»);
    wrapper.setAttribute ("метка арии", "спойлер");

    content.setAttribute ("скрытая ария", истина);
  } еще {
    обертка.setAttribute ("расширенная ария", истина);
    wrapper.setAttribute («роль», «презентация»);
    wrapper.removeAttribute ("метка арии");

    content.setAttribute ("скрытая ария", ложь);
  }
}  

 

  

    
  
  

    
 Заголовок медиа-объекта 
    
 Содержимое медиа-объекта ... 
  
 

 

  

    
 Этот абзац находится внутри столбца шириной 6 дюймов.
  
  

    
 Этот абзац находится внутри столбца шириной 6 дюймов