Спойлер на 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

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 12 In Development 49.0 (49.0) Нет 15 6
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.0 In Development 49.0 (49.0) Нет Нет 6.1

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; . Обратите внимание, что открытие / закрытие не могут быть анимированы / перенесены напрямую без жесткого кодирования высоты для пример.

  1. А
  2. D
  3. В
  4. Б
  5. В

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

и новый тег , который изменяет заголовок с «Details» по умолчанию на все, что мы положить в это.

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


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


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

Я предполагаю, что каждое свойство под .spoiler-details говорит само за себя, и вы можете стилизовать его по своему усмотрению. Необходимо упомянуть несколько свойств для тега summary и селектора [open] .

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

, потому что только заголовок (сводка) доступен для нажатия .

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

Тег

поставляется с атрибутом open , который мы можем использовать для изменения стилей, если он открыт, или для использования в JavaScript. Чтобы выбрать его в CSS, мы просто используем селектор логических атрибутов, добавив [open] после нашего класса или details element selector. Здесь мы используем его, чтобы выбрать и добавить border-bottom , когда он открыт.

Анимированные детали

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

  <подробности>
   Анимированные детали 
  

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

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

HTML в основном такой же: добавлен анимированный класс к тегу

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

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


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

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

Затем мы используем эти анимации после открытия

.

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

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

Нам нужно добавить animation-fill-mode: forwards; для вставной анимации, чтобы контент оставался в последней позиции 100% анимации слайд . Нам это не нужно для анимации flash , потому что

имеет непрозрачность : 1 по умолчанию.

Итак, вашим первым инстинктом может быть анимация высоты , когда открывается / закрывается

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

Плюсы

  • Простые и семантические
  • Множественные могут быть открыты одновременно (спойлеры на чистом CSS могут открывать только один за раз)
  • Не требует больше работы, чтобы быть доступными

Минусы

  • Невозможно анимировать переход открытия / закрытия
  • Не работает для встроенного текста i.е. скрытие части абзаца
  • Не работает в Internet Explorer

JavaScript

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

Код

  

Спойлер JavaScript

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

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

HTML немного более подробный, потому что мы добавляем атрибуты ARIA для доступности, но основными частями являются классы js-spoiler и hidden , а также структура HTML: оборачивает , чтобы у нас были отношения между родительскими и дочерними элементами.

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

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

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

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

JavaScript

JavaScript не так уж и сложен, мы просто хотим прослушивать любые события щелчка по этим тегам спойлера и переключать скрытый класс вместе с атрибутами ARIA.На этом этапе уже есть выбор дизайна: вы хотите, чтобы спойлер был переключаемым, или вы хотите, чтобы он открывался щелчком, а затем его нельзя было снова скрыть (стиль Discord)?

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

 



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





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


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

Это указывает браузеру прислушиваться к событиям, теперь давайте создадим эту функцию handleSpoiler , которая будет запускаться при возникновении события.

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

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

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

  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 ("скрытая ария", ложь);
  }
}  

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

Плюсы

Минусы

  • Требуется, чтобы у пользователя был включен JavaScript.

Конец

На этом мини-руководство завершено!

Сообщите мне свои мысли, отзывы и поделитесь своими достижениями.

Как может выглядеть расширение «тег спойлера»? - # 59, автор chrisalley - Расширения

+++ Groostav [23 апр, 15 21:00]:

Я предполагаю, что, поскольку обсуждение сместилось с «как должна выглядеть уценка для пользователей» на «сколько тегов div мы должны использовать и, кстати, что именно такое теги div в любом случае», эта проблема была отсортирована принял. Но последний пост по этому вопросу был опубликован в прошлом году, и я не уверен, в каком направлении он будет двигаться дальше.Какие-нибудь Новости?

Никаких предложений не принято.

У меня есть пример использования: теперь моя команда читает на github и голосует по проблемам перед стартом спринта. Прямо сейчас эти голоса представляют собой просто текст в виде комментариев, поэтому, если вы голосуете как младший разработчик, а старший разработчик уже проголосовал, вы не можете помочь, но проявите предвзятость, взглянув на комментарии. Я хочу поместить голоса в теги спойлеров, чтобы у читателя было явное намерение увидеть голосование. Я заметил, что stackoverflow уже делал это со схемой, которая идеально подходила для моего случая использования, но github - нет.

Мне не совсем понятно, что вы ищете. Если вы пытаетесь сделать это на github, тогда вам помогут только изменения в процессоре Markdown на github, и это не место, чтобы спрашивать.

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

Например, вы можете установить соглашение, согласно которому любая цитата в блоке начинается с одного ! будет трактоваться как спойлер.Затем на сервере вы проходите AST после синтаксического анализа, ищите цитаты, соответствующие этому описанию, и вставляете вокруг них необработанный HTML, чтобы они отображались скрытыми по умолчанию, с кнопкой для их отображения.

Для этого не требуется никакого причудливого синтаксиса атрибута блока, и есть некоторые преимущества в том, чтобы НЕ использовать необычный синтаксис атрибута блока (ваш документ будет хорошо ухудшаться на github или другом рендерере Markdown). Также обратите внимание, что даже если бы было - синтаксис причудливого атрибута блока, вам все равно нужно было бы выполнить некоторую пользовательскую обработку AST.Хотя мы можем рассматривать синтаксис универсального атрибута блока, «спойлер» кажется слишком специализированным, чтобы быть частью спецификации.

Как сделать текст «спойлер» на вики-страницах github?

Как сделать текст «спойлер» на вики-страницах github?

Wiki-страницы GitHub поддерживают разметку со вкусом GitHub. Подробнее о уценке со вкусом GitHub читайте здесь:

Однако прямого метода добавления текста спойлера в разметку со вкусом GitHub не существует. Но есть обходной путь!

Подход: Markdown поддерживает в нем блоки HTML.Итак, мы можем использовать теги HTML

и для создания текста спойлера. Заголовок сообщения Spoiler Alert можно указать в теге . Остальная часть спойлера должна быть внутри тега
. Только нажатие на заголовок «Впереди спойлер» откроет спойлер. Текст в сводном теге - это заголовок спойлера. Код, изображения, ссылки и т. Д. Можно использовать после уценки GitHub в теге сведений.

Пример:

html

< голова >

< 2 < заголовок >

«спойлер» текст на страницах github wiki

заголовок >

голова >

< корпус >

< подробности >

< сводка > GeeksforGeeks сводка >

A Портал информатики для гиков

подробнее 9 0012 >

корпус >

html >

Вывод: Тег

вместе с < Summary> tag создает следующий вывод в markdown .

Примечание: Вышеуказанные выходные данные были созданы непосредственно из предварительного просмотра уценки GitHub Wiki Pages.

Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции DSA с помощью курса DSA Self Paced Course по приемлемой для студентов цене и будьте готовы к работе в отрасли.

html спойлер без javascript

Этуотер по-прежнему не в ладах с синей стеной, но без инцидентов после предъявления Нолану ультиматума. Проблема в том, что CSS нельзя использовать с тегом [doHtml] моего форума.Fiddle meta Private fiddle Extra. Так что мне нужен как бы сырой HTML-код спойлера. Форум сообщества HardOCP для энтузиастов компьютерного оборудования. Анимация отображения и скрытия достигается с помощью CSS3 Transition. Многие люди используют JavaScript или div на всю жизнь, когда используют аккордеоны. При необходимости для написания этого кода можно использовать Javascript или Flash. ! Основано на работе Брайана Энигмы: http ... # Функция обратного вызова для преобразования входного текста в выходной HTML-файл с функцией renderSpoiler ... Расширения без изображения; Расширения без политики совместимости; Меню навигации.Подписывайся. JavaScript HTML CSS Результат Визуальный: Светлый Темный Вставить фрагмент Предпочитать iframe? AMD EPYC «Genoa» (Zen4) с 96 ядрами на 12 чиплетах, 12-канальной памятью DDR5 и SP5 (сокет LGA6096). Ресурсы URL cdnjs 0.: Автоматическое изменение размера в соответствии с кодом отсутствует. Посмотреть детали. Привет, я попытался сделать то же самое без использования jQuery. Dept. Я пока не добился успеха. Сообщество веб-дизайнеров и разработчиков, где можно обсудить все, от HTML, CSS, JavaScript, PHP до Photoshop, SEO и т. Д. button: hover {background: # 3071A9} См. Pen ksdmf от BootstrapBay (@bootstrapbay) на CodePen.0. По умолчанию текст кнопки записывается как «Показать», и когда пользователь нажимает кнопку, текст кнопки должен заменяться на «Скрыть», а если пользователь нажимает «Скрыть», текст кнопки должен измениться на «Показать». Чтобы разместить тег в коде без закрытия, используйте <и> вместо, чтобы переопределить это поведение. Мне нужен спойлер к руководству по форуму, которое я пишу. Чтобы затемнить кнопку, просто установите более темный цвет фона, когда: hover активирован. Группы Extra. Например, добавление к каждой строке префикса "!" В этом примере мы будем приветствовать пользователя с помощью предупреждения.Блокировка рендеринга родительской страницы. - размещено в разделе Отзывы, предложения и вопросы: так что, если бы я хотел разместить весь свой папирусный логин, не занимая так много места, как бы я спрятал его в спойлере? Аккордеонами круто играть. Берджесс и Рузек сблизились, защищая милую маленькую девочку Микайлу после того, как вся ее семья была убита. разве нет HTML-тега, для которого мы могли бы настроить стиль CSS, чтобы он работал таким образом? .. так что мы выбираем представление уценки. Если бы это было так, я бы не задавал этот вопрос.jquery-validation - плагин проверки jQuery. Итак, в этом мы узнаем, как мы можем изменить цвет текста гиперссылки с помощью CSS в HTML. В эпоху адаптивного веб-дизайна старая тенденция создания веб-сайтов с использованием таблиц HTML больше не может использоваться. Вы должны использовать теги div и стилизовать их по мере необходимости. Страница 1 из 2 - Как мне вставить метку спойлера? 2020-09-20.

mini.css - Docs

Система сеток mini.css использует макет Flexbox, чтобы предоставить вам простую, современную, гибкую систему макетов для ваших веб-приложений.Как и большинство систем сеток современных CSS-фреймворков, он состоит из трех основных компонентов - контейнеров, строк и столбцов:

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

Образец кода

 

Систему сеток можно использовать для создания адаптивного медиа-объекта одним из многих способов.Ниже приведен простой пример двухколоночного медиа-объекта с изображением и некоторым текстом:

 
Описание изображения

Заголовок медиа-объекта

Содержимое медиа-объекта ...

Модификаторы

Размеры и ширина экрана

Каждый класс столбца определяется указанием размера экрана (маленький - см , средний - мд, или большой - lg ) и ширины столбца (значение от 1 до 12 или вы можете опустить его для столбца жидкости), разделенные тире (например,грамм. .col-sm-6 для 6-шириной колонки на маленьком экране). Используя их, вы можете применять разные макеты для разных размеров экрана, изменяя ширину столбцов, используя несколько классов. Обратите внимание, что ширина столбца применяется рекурсивно, что означает, что если вы не укажете ширину для определенного размера экрана, столбец будет использовать ширину, примененную к предыдущему наибольшему размеру экрана.

Пример

Средний / Большой экран

Пример кода
 

Предопределенные макеты

Строки можно изменять, чтобы применять предопределенные макеты к столбцам внутри них, что эффективно сокращает объем работы, необходимой для простых макетов. Чтобы создать предопределенный макет, вы можете добавить класс к строке ( .cols - * - * ), указав размер экрана и ширину для столбцов внутри него (или опуская ширину для гибких столбцов), аналогично способу столбцы определены (например, .row.cols-sm-6 приведет к тому, что все элементы внутри строки будут иметь ширину 6 на маленьком экране). Столбцы внутри предопределенного макета не требуют отображения каких-либо дополнительных классов и, как и обычные макеты столбцов, их ширина применяется рекурсивно.

Пример кода
 

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

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


Смещения столбцов

Столбцы можно перемещать вправо, применяя классы смещения ( .col - * - offset- * ), определяя размер экрана и смещение (значение между 0 и 11 , например, .col-sm-offset-3 переместит столбец на 25% вправо на маленьком экране). Как и все другие модификаторы столбцов, смещения применяются рекурсивно.

Пример
Пример кода
 

Изменение порядка столбцов

Столбцы могут быть переупорядочены на разных размерах экрана, применяя класс изменения порядка ( .col - * - * ), определяя размер экрана и порядок (первый, нормальный или последний, например, .col-sm-last переместит столбец в конец своей строки на маленьком экране).Как и все другие модификаторы столбцов, переупорядочение применяется рекурсивно.

Пример

Средний / Большой экран

Пример кода
 

Как я могу реализовать цитату спойлера только с помощью CSS?

Html spoiler

Здравствуйте, вот интересно, как сделать текст спойлера на сайте с html / css. Я был черным текстом с черным фоном, но при наведении на него черный текст становился белым, делая его

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

Чтобы создать более одного спойлера, вы должны дать спойлерам уникальный идентификатор. Например, вы можете использовать «spoiler2» в качестве идентификатора второго спойлера. Вам нужно заменить «спойлер» на «спойлер2» во всех четырех местах - в одном в строке 2 и в трех в строке 5.

Текст спойлера

Теги спойлера! - Discord, Как это работает? · Обратите внимание, что текст, помеченный как спойлер внутри кодовых блоков, не будет скрыт. · Вы также можете вручную пометить спойлеры с помощью тегов спойлеров, чтобы пометить отдельные части сообщения или все сообщение как спойлер. Самый простой способ отметить ваше сообщение как спойлер - это выделить текст и щелкнуть значок глаза. Это пометит эту часть сообщения как спойлер. Обратите внимание, что текст, помеченный как спойлер в блоках кода, не будет скрыт.

Как сделать текст скрытым? (Текст спойлера): справка, , щелкните его правой кнопкой мыши и выберите «Отметить как спойлер». Надеюсь это поможет!. Я пытаюсь начать новое обсуждение, и в том, что я говорю, есть спойлеры, и я хочу использовать этот текст со спойлером, но не знаю, как это сделать. Я уже посмотрел на «Помощь по форматированию», но не понимаю, как сделать мой текст закрытым.

Как сделать текст спойлера на Discord, Тег спойлера может просто раскрасить текст, чтобы он был идентичен фону, чтобы кто-то мог выбрать текст, чтобы перекрасить его и, таким образом, сделать его читабельным.Это просто, а теги Spoiler похожи на редактирование HTML в вашем комментарии. Просто оберните новый тег вокруг любого текста в комментарии, и готово! После публикации комментария текст спойлера скрывается серым фоном. Наведите курсор на текст спойлера, чтобы раскрыть его содержание. Если вы пользуетесь мобильным телефоном, нажмите на текст спойлера, чтобы просмотреть его.

Еще статьи

Спойлер | CKEditor.com

Плагин добавляет спойлер в CKEditor

Скриншоты

Онлайн-конструктор

Рекомендуемый способ установки всех надстроек CKEditor - создать собственную сборку с помощью Online Builder.Для этого нажмите кнопку Добавить в мой редактор на странице плагина. Когда вы закончите, нажмите кнопку Build my editor в правой части страницы, чтобы перейти в Online Builder.

Примечание: Это дополнение уже выбрано для включения в вашу текущую сборку.

Инструкции по установке надстройки

Если вы хотите добавить плагин вручную, вам потребуется:

  1. Распакуйте загруженный плагин .zip в папку plugins вашей установки CKEditor.Пример:
     http://example.com/ckeditor/plugins/spoiler 
  2. Включите подключаемый модуль с помощью параметра конфигурации extraPlugins . Пример:
     config.extraPlugins = 'спойлер'; 
  3. Загрузите и настройте все его зависимости.

Дополнительные зависимости

Никаких дополнительных зависимостей.

Примечание: У плагина могут быть дополнительные требования.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Theme: Overlay by Kaira Extra Text
Cape Town, South Africa