Установка спойлера на страницу сайта
Иногда возникает необходимость установить на странице сайта спойлер. Что это такое и для чего он нужен. Вы наверное видели на некоторых сайтах кнопки с надписью «спойлер», при нажатии на которые появлялся какой-нибудь текст, распечатка скрипта и т.д. Спойлер служит для экономии места на странице сайта.
При поиске спойлера в интернете можно найти большое количество разных видов спойлеров. Я выбрал три вида, которые очень просто установить. Ниже приведены примеры. Для установки надо всего лишь скопировать и вставить код спойлера в нужное место страницы сайта, и вписать в определённое место тот текст, который надо скрыть в спойлере
На первом примере спойлер будет выглядеть так: Спойлер. Полный код состоит из трёх частей. Не буду забивать мозги умными словами. Просто скопируете всё и вставите на странице в нужном месте. А внизу кода увидите надпись — Здесь должен быть текст. Вот вместо этой надписи вставите то, что хотите спрятать в спойлере
Пример — это код стандартного спойлера. Он выглядит в виде кнопки. Для установка копируете код и вставляете в нужное место
Пример спойлера:
Скопируй те и вставьте код в нужное место:
|
|
Пример спойлера, поставив галочку, открывается скрытый текст:
Показать
Тут будет текст скрытого контента.
Код спойлера:
| <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> |
Статья была полезной?