Ваш IP: 54.92.197.82

Главная » Спойлер для сайта

Спойлер для сайта

 

Установка спойлера на страницу сайта

 

Иногда возникает необходимость установить на странице сайта спойлер. Что это такое и для чего он нужен. Вы наверное видели на некоторых сайтах кнопки с надписью "спойлер", при нажатии на которые появлялся какой-нибудь текст, распечатка скрипта и т.д. Спойлер служит для экономии места на странице сайта.

При поиске спойлера в интернете можно найти большое количество разных видов спойлеров. Я выбрал три вида, которые очень просто установить. Ниже приведены примеры.  Для установки надо всего лишь скопировать и вставить код спойлера в нужное место страницы сайта, и вписать в определённое место тот текст, который надо скрыть в спойлере

На первом примере спойлер будет выглядеть так: Спойлер. Полный код состоит из трёх частей. Не буду забивать мозги умными словами. Просто скопируете всё и вставите на странице в нужном месте. А внизу кода увидите надпись - Здесь должен быть текст. Вот вместо этой надписи вставите то, что хотите спрятать в спойлере

Пример - это код стандартного спойлера. Он выглядит в виде кнопки. Для установка копируете код и вставляете в нужное место
Пример спойлера:

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

 

Скопируй те и вставьте код в нужное место:

<br>
 <div
class="smallfont"><input type="button" value="Название спойлера" class="input-button"
onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= ''; this.innerText = ''; this.value = 'Свернуть'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'Развернуть';
}"/>
</div>
<div class="alt2">
       <div style="display: none;">
Содержание спойлера
</div>
</div>
</div>

Пример спойлера, поставив галочку, открывается скрытый текст:

Показать
Тут будет текст скрытого контента.

Код спойлера:

 <style type="text/css"><!--
alt2{ margin: 0px;  padding: 6px;  border: 1px inset;}
smallfont{margin-bottom:2px;}
spoil{margin:10px; margin-top:5px;} // задаем стили
}
--></style>
<div class="spoil">
<div class="smallfont">Показать <input class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Свернуть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Развернуть'; }" type="checkbox" /></div>
<div class="alt2">
<div style="display: none;">Тут будет текст скрытого контента.</div>
</div>
Спойлер для сайта обновлено: Апрель 10, 2017 автором: admin

1 комментарий

  1. Превосходная статья! Очень многое доложено понятным языком. Теперь я знаю что такое спойлер!

Оставить комментарий

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

*