Спойлер — это скрытая информация на сайте (текст, изображение и т.д.), которая открывается на странице после нажатия на кнопку или ссылку
Как установить спойлер на сайт
JavaScript
Чтобы сделать такой спойлер у себя на сайте сначала вначале HTML странице (или в шаблоне) установите скрипт спойлера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> function spoiler(spoiler_id) { if(document.getElementById(spoiler_id).style.display == 'none') { document.getElementById(spoiler_id).style.display = 'block'; } else { document.getElementById(spoiler_id).style.display = 'none'; } } </script> |
HTML
Далее в нужном месте страницы установите сам спойлер.
|
1 2 3 4 5 6 7 8 |
<input type="button" onclick="spoiler('spoiler1')" value="Нажми меня"> <p><br></p> <div id="spoiler1" style="top:50; left:50; font-size:14px; display:none;"> А это содержимое спойлера. Тут может быть все, что угодно. Используйте любые HTML-теги. <hr> </div> |
Данный код можно вcтавить на любую HTML сраницу в то место, где нужен спойлер. Содержимое спойлера может быть любое на Ваше усмотрение.
Также этот спойлер можно вставлять и в шаблоны сайта uCoz, а в самом содержимом использовать системные переменные Ucoz.
Несколько спойлеров на одной странице
Если на одной странице нужно установить несколько таких спойлеров, тогда нужно сделать следующее.
За спойлер отвечает идентификатор:
Именно его и нужно поменять в HTML коде спойлера (он там встречается 2 раза) и вставить весь HTML код с новым идентификатором на страницу, где нужен еще один спойлер. И так столько раз, сколько нужно спойлером на странице.
Но чтобы вас не путать, просто ниже прикладываю код второго спойлера, где spoiler1 я уже заменила на spoiler2.
|
1 2 3 4 5 6 7 8 |
<input type="button" onclick="spoiler('spoiler2')" value="Нажми меня"> <p><br></p> <div id="spoiler2" style="top:50; left:50; font-size:14px; display:none;"> А это содержимое спойлера. Тут может быть все, что угодно. Используйте любые HTML-теги. <hr> </div> |
Редактирование кнопки спойлера
Сама кнопка это следующая строка. Чтобы отредактировать кнопку — нужно вносить изменения именно в эту строку:
|
1 |
<input type="button" onclick="spoiler()" value="Нажми меня"> |
Тег <input> применяется для создания различных кнопок, флажков, переключателей и полей для заполнения (форм). У этого тега очень много атрибутов, но для редактирования нашей кнопки мы рассмотрим лишь некоторые.
Атрибут type — в нашем случае только два варианта:
— button — простая кнопка;
— image — кнопка изображение. Применяя этот атрибут не забудьте добавить атрибут src и путь к файлу картинке.
|
1 |
<input type="image" src="путь_к_картинке" onclick="spoiler()" value="Нажми меня"> |
Атрибут value — в данном случае текст Вашей кнопки, чтобы его изменить просто введите другой текст;
Атрибут style — можно применить для изменения цвета кнопки и цвета шрифта. За цвет кнопки будет отвечать background, а за текст шрифта color.
|
1 |
<input type="button" onclick="spoiler()" value="Нажми меня" style="background: #6300ff; color: #faf9fc;"> |
И в итоге у Вас может быть такая цветная кнопка:
Также существует еще много вариантов установки спойлера на сайт. Один из них — спойлер с плавным открытием и закрытием.
Добрый день!
Помогите с решением вопроса по размещению нескольких кнопок на странице. Я уже по всякому попробовал менять имя SPOLER (6шт), но так и не нашел правильное решение.
Артем, отправьте мне Ваш код в личку: admin@web-first-step.ru
а можно как нибудь поменять стиль кнопки. чтобы она была не по размеру текста написанного в ней а больше.и как можно поменять стиль кнопки ?
Vladimir, да конечно. Вы можете кнопку сделать любой с помощью CSS стилей.
неплохо работают, только нумеровать надо spoiiler1 spoiiler2.
нельзя ли как то убрать синюю обводку при нажатии у последней кнопки
Думаю, в моем случае она задана настройками шаблона дизайна сайта. Ее не должно быть в стандартном варианте.
Забыл сказать самое главное: желательно, чтобы спойлеры можно было нумеровать, так как на одной странице их будет не менее трех.
3go1st, В статье в разделе «Несколько спойлеров на одной странице» описано как нумеровать спойлеры и размещать несколько спойлеров на одной странице.
В том виде, в котором Вы дали — не работает, даже совместное использование не работает как спойлер.
Добрый день, 3go1st. Пришлите, пожалуйста, ссылку на свой спойлер, так как я тестировала такой вариант у себя на сайте и все работает.
Со спойлером картинкой Я разобрался, спасибо. У меня еще возникла потребность вот в чем.
Чтобы при клике на слово или картинку, открывался спойлер в другом месте страницы. Например клик на слово ОТКРЫТЬ, открывалось окно с контентом намного ниже или выше от этого слова, допустим слово ОТКРЫТЬ в вверху страницы, а открывается спойлер, где-то в середине, после определенных модулей и текста.
Заранее спасибо за ответ!
Все просто! За кнопку отвечают теги:
а за содержимое
Ставьте, нужные теги в любое место страницы.
Огроменное спасибо. Единственное внятное пояснение из всей той кучи, что я нашла. Особенно про «галочку на Ucoz» — спойлер не раскрывался, пока не сняла эту галку.
И снова здравствуйте))
Столкнулся с проблемой: в случае спойлера в виде картинки, при клике на картинку, показывается скрытый текст буквально секунду и обновляется страница, спойлер соответственно закрывается.
Вот как я прописал код:
Слово spoiler не нумеровал и не менял, оставил как есть, вместо слова «путь_к_картинке», добавил ссылку на картинку, так что, больше ничего не менял.
День добрый, 3go1st))) У меня все работает! http://js.do/natrud/42074
Если Вы работаете на uCoz, в режиме редактирования материала проверьте стоит ли у вас галочка «Заменять переводы строк тегом <BR> «. Этой галочки быть НЕ должно!
Способ с Youtube сразу отпадает, т.к. этот видеохостинг, скажем так, довольно строгий в отношении модерации, да и на него всегда есть ссылка перехода, т.е. есть возможность уйти с сайта, то что имеется у меня никак не уводит с сайта. Осталось как-то разобраться с автозапуском, может есть способ какой-то ограничительной области, куда можно поместить ссылку, как бы её заморозив. Быть может как-то так: при открытии спойлера открывается картинка с экраном плеера, при клике на неё (картинку) запускается видео. Не подскажете как это реализовать ??
Единственное что могу посоветовать это варианты со всплывающими окнами, так как в таком случае видео будет начинаться только во всплывающем окне. Реализовать можно как через спойлер:
так и просо кнопкой:
Я вот что понял, моя ссылка на видео имеет свойство запускаться автоматически, среди всего текста ссылки я не нашел чего-то, чтобы могло её остановить, может есть какой-то способ остановить ?? Вот пример ссылки: http://n20.filecdn.to/ff/YjkzZDU4ZGI1OTRjNTRkMmI5ZGFmNWUzNTI1ODFjYmV8ZnN0b3wxNTY1MzU3ODYzfDEwMDAwfDJ8MHxmf DIwfDgwZmY3ZjVmOTk1NzY1NGMyMTY3NjkzODA2YWZjMjM0fDB8MjU6bC4xODpyLjMzOjAuMjQ6ei40Oj R8MHwxMjY2MjA0NDAx/play_28dxdv80afkvv.mp4
Я все думала над Вашим видео. Вероятно, автоматический запуск видео зависит именно от настоек сайта, на котором оно находится. Например, на Youtube такого нет. А что если скачать это видео и загрузить на youtube, и на Вашем сайте уже размещать ссылку с youtube?
Уже близко, Ура !! Мне пришлось убрать из Вашего кода //www.youtube.com/embed/ID_youtube_video и вставить свою ссылку на видео, только вот маленкая проблемка, видео запускается автоматически, даже без нажатия на кнопку спойлера, выглядит это так: спойлер скрыт, идет звук видео, само видео можно увидить только после открытия спойлера, что в коде изменить, чтобы видео запускалось только после открытия спойлера?
Попробовал вариант с видео Youtube, только со своей картинкой и своей ссылкой на видео, не из Youtube, все работает, только я спрашивал, как сделать запуск видео без картинки, чтобы сразу после клика на спойлер, под спойлером начинало идти видео, В САМОМ СПОЙЛЕРЕ, без всплывающего окна, как получается с примером видео в Youtube.
Попробуйте так:
Спасибо огромное, спойлер работает и даже несколько одновременно, но у меня вопрос, как под него спрятать видео, на видео есть именно ссылка, не хтмл код видео, а ссылка! Когда вставляю туда эту ссылку, отображается только буквенный текст ссылки. Как сделать чтобы при открытии спойлера начинало идти видео, при этом в маленьком окошке (т.е. в не развернутом виде), так чтобы сайт оставался открытым, самый простой пример, что-то типа как ВКонтакте.
Вот пример ссылки на видео с мультфильмом:
http://n4.filecdn.to/ff/OWNhODRhMzRiNjQ3MDE4ZGJjZjcyMDNlY2QyMjY0Zjh8ZnN0b3wxNTY1MzU3ODYzfDEwMDAwfDJ8MHxkf DR8MWFlNjI5ZDRhODEwMzhmMzg4OTE5YTUxZGI1NmY5YzF8MHwzOjF8MHwxNzQ5MjQ1MTgx/play_28dxjzc0obtez.mp4
Видео можно сделать во сплывающем окне. Вот есть такой вариант: Видео Youtube во всплывщем окне