Содержание

CSS и HTML только выпадающий спойлер

У вас есть какая-то ошибка в вашем CSS. Вы указали .spoiler > div для отображения и только .spoiler для скрытия . Вы должны указать одно и то же для обоих, и анимация будет работать плавно. 

.spoilerbutton {
    display:block;
    margin: 5px 0;
}
.spoiler {
    overflow:hidden;
    background: #f5f5f5;
}
.spoiler > div {
    -webkit-transition: all 0.2s ease;
    -moz-transition: margin 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: margin 0.2s ease;
}
.spoilerbutton[value="Show"] + .spoiler > div {
    margin-top:-100%;
}
.spoilerbutton[value="Hide"] + .spoiler > div {
    padding:5px;
}
<input type="button" value="Show">
<div><div>
PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
</div></div>

Кстати, вы также можете анимировать max-height вместо margin , как это : 

. spoilerbutton {
  display: block;
  margin: 5px 0;
}

.spoiler {
  overflow: hidden;
  background: #f5f5f5;
}

.spoiler>div {
  margin: 5px;
  overflow: hidden;
  transition: all 1s ease;
}

.spoilerbutton[value="Show"]+.spoiler>div {
  max-height: 0;
}

.spoilerbutton[value="Hide"]+.spoiler>div {
  max-height: 90px; /*use a big value here*/
}


<input type="button" value="Show">
<div>
  <div>
    PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE PUT CONTENT YOU WISH TO HIDE HERE
  </div>
</div>

как скрыть часть текста с раскрытием по клику

2 апреля 2020

Советы

Рассмотрим как спрятать часть текста под раскрывающийся спойлер.

 

Пример спойлера, который будем рассматривать (для раскрытия — кликните):

 

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

 

В данной статье, мы будем рассказывать как сделать скрытие текста самым простым способом, с помощью тега «details».

 

Итак, чтобы создать простейший спойлер, вставьте вот такой HTML код:

 


<details>
  <p>Содержание спойлера</p>
</details>

 

Результат:

 

Содержание спойлера

 

Чтобы правильно разместить тег в текстовом редакторе, его необходимо переключить на «Источник»:

 

 

Найдите тот отрывок текста, который необходимо сделать скрытым:

 

 

Разместите открывающий и закрывающий теги «details» перед и после текста, который должен быть скрытым:

 

 

Сохраните страницу.

 

Полученный результат должен выглядеть так:

 

 

Обращаем ваше внимание, заголовок «Подробнее» выставляется по умолчанию. Его можно сменить при помощи тега для заголовка «summary»:

 


<details>
<summary>Какой то заголовок</summary>
  <p>Содержание спойлера</p>
</details>

 

Результат:

 

Какой то заголовок

Содержание спойлера

 

В текстовом редакторе, кроме тега «details» перед и после скрываемого текста, перед самим текстом, добавьте строку с наименованием скрывающей ссылки, вот так:

 

 

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

 


Свежие публикации данной категории

19 просмотров этой страницы

Код спойлера для AMP страниц