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

Спойлер — это скрытая информация на сайте (текст, изображение и т.д.), которая открывается на странице после нажатия на кнопку или ссылку

Как установить спойлер на сайт

Чтобы сделать такой спойлер у себя на сайте, используйте этот код:

Данный код можно вcтавить на любую HTML сраницу в то место, где нужен спойлер. Содержимое спойлера может быть любое на Ваше усмотрение.
Также этот спойлер можно вставлять и в шаблоны сайта uCoz, а в самом содержимом использовать системные переменные Ucoz.

Несколько спойлеров на одной странице

Если на одной страницы нужно установить несколько таких спойлеров, тогда этот код Вы вставляете несколько раз. НО!!! В этом коде установлена функция, которой дано имя spoiler. В следующем коде который Вы будете ставить на той же странице слово spoiler в коде Вам нужно заменить на любое другое. Если третий раз — опять новое слово. Слово spoiler в коде встречается 6 раз!!! Будьте внимательны.

Редактирование кнопки спойлера

Сама кнопка это следующая строка. Чтобы отредактировать кнопку — нужно вносить изменения именно в эту строку:

Тег <input> применяется для создания различных кнопок, флажков, переключателей и полей для заполнения (форм). У этого тега очень много атрибутов, но для редактирования нашей кнопки мы рассмотрим лишь некоторые.
Атрибут type — в нашем случае только два варианта:
— button — простая кнопка;
— image — кнопка изображение. Применяя этот атрибут не забудьте добавить атрибут src и путь к файлу картинке.

Атрибут value — в данном случае текст Вашей кнопки, чтобы его изменить просто введите другой текст;
Атрибут style — можно применить для изменения цвета кнопки и цвета шрифта. За цвет кнопки будет отвечать background, а за текст шрифта color.

И в итоге у Вас может быть такая цветная кнопка:

Также существует еще много вариантов установки спойлера на сайт. Один из них — спойлер с плавным открытием и закрытием.


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

25 комментария

  1. Добрый день!
    Помогите с решением вопроса по размещению нескольких кнопок на странице. Я уже по всякому попробовал менять имя SPOLER (6шт), но так и не нашел правильное решение.

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

  3. неплохо работают, только нумеровать надо spoiiler1 spoiiler2.

  4. Забыл сказать самое главное: желательно, чтобы спойлеры можно было нумеровать, так как на одной странице их будет не менее трех.

  5. В том виде, в котором Вы дали — не работает, даже совместное использование не работает как спойлер.

  6. Со спойлером картинкой Я разобрался, спасибо. У меня еще возникла потребность вот в чем.
    Чтобы при клике на слово или картинку, открывался спойлер в другом месте страницы. Например клик на слово ОТКРЫТЬ, открывалось окно с контентом намного ниже или выше от этого слова, допустим слово ОТКРЫТЬ в вверху страницы, а открывается спойлер, где-то в середине, после определенных модулей и текста.
    Заранее спасибо за ответ!

    • Все просто! За кнопку отвечают теги:

      а за содержимое

      Ставьте, нужные теги в любое место страницы.

  7. Огроменное спасибо. Единственное внятное пояснение из всей той кучи, что я нашла. Особенно про «галочку на Ucoz» — спойлер не раскрывался, пока не сняла эту галку.

  8. И снова здравствуйте))
    Столкнулся с проблемой: в случае спойлера в виде картинки, при клике на картинку, показывается скрытый текст буквально секунду и обновляется страница, спойлер соответственно закрывается.
    Вот как я прописал код:

    Слово spoiler не нумеровал и не менял, оставил как есть, вместо слова «путь_к_картинке», добавил ссылку на картинку, так что, больше ничего не менял.

  9. Способ с Youtube сразу отпадает, т.к. этот видеохостинг, скажем так, довольно строгий в отношении модерации, да и на него всегда есть ссылка перехода, т.е. есть возможность уйти с сайта, то что имеется у меня никак не уводит с сайта. Осталось как-то разобраться с автозапуском, может есть способ какой-то ограничительной области, куда можно поместить ссылку, как бы её заморозив. Быть может как-то так: при открытии спойлера открывается картинка с экраном плеера, при клике на неё (картинку) запускается видео. Не подскажете как это реализовать ??

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

      так и просо кнопкой:

  10. Я вот что понял, моя ссылка на видео имеет свойство запускаться автоматически, среди всего текста ссылки я не нашел чего-то, чтобы могло её остановить, может есть какой-то способ остановить ?? Вот пример ссылки: http://n20.filecdn.to/ff/YjkzZDU4ZGI1OTRjNTRkMmI5ZGFmNWUzNTI1ODFjYmV8ZnN0b3wxNTY1MzU3ODYzfDEwMDAwfDJ8MHxmf DIwfDgwZmY3ZjVmOTk1NzY1NGMyMTY3NjkzODA2YWZjMjM0fDB8MjU6bC4xODpyLjMzOjAuMjQ6ei40Oj R8MHwxMjY2MjA0NDAx/play_28dxdv80afkvv.mp4

    • Я все думала над Вашим видео. Вероятно, автоматический запуск видео зависит именно от настоек сайта, на котором оно находится. Например, на Youtube такого нет. А что если скачать это видео и загрузить на youtube, и на Вашем сайте уже размещать ссылку с youtube?

  11. Уже близко, Ура !! Мне пришлось убрать из Вашего кода //www.youtube.com/embed/ID_youtube_video и вставить свою ссылку на видео, только вот маленкая проблемка, видео запускается автоматически, даже без нажатия на кнопку спойлера, выглядит это так: спойлер скрыт, идет звук видео, само видео можно увидить только после открытия спойлера, что в коде изменить, чтобы видео запускалось только после открытия спойлера?

  12. Попробовал вариант с видео Youtube, только со своей картинкой и своей ссылкой на видео, не из Youtube, все работает, только я спрашивал, как сделать запуск видео без картинки, чтобы сразу после клика на спойлер, под спойлером начинало идти видео, В САМОМ СПОЙЛЕРЕ, без всплывающего окна, как получается с примером видео в Youtube.

    • Попробуйте так:

  13. Спасибо огромное, спойлер работает и даже несколько одновременно, но у меня вопрос, как под него спрятать видео, на видео есть именно ссылка, не хтмл код видео, а ссылка! Когда вставляю туда эту ссылку, отображается только буквенный текст ссылки. Как сделать чтобы при открытии спойлера начинало идти видео, при этом в маленьком окошке (т.е. в не развернутом виде), так чтобы сайт оставался открытым, самый простой пример, что-то типа как ВКонтакте.
    Вот пример ссылки на видео с мультфильмом:
    http://n4.filecdn.to/ff/OWNhODRhMzRiNjQ3MDE4ZGJjZjcyMDNlY2QyMjY0Zjh8ZnN0b3wxNTY1MzU3ODYzfDEwMDAwfDJ8MHxkf DR8MWFlNjI5ZDRhODEwMzhmMzg4OTE5YTUxZGI1NmY5YzF8MHwzOjF8MHwxNzQ5MjQ1MTgx/play_28dxjzc0obtez.mp4

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

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