fbpx
Перейти к содержимому

🇯🇸 Простой спойлер для сайта

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

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

JavaScript

Чтобы сделать такой спойлер у себя на сайте сначала вначале HTML странице (или в шаблоне) установите скрипт спойлера:

HTML

Далее в нужном месте страницы установите сам спойлер.

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

Также этот спойлер можно вставлять и в шаблоны сайта uCoz, а в самом содержимом использовать системные переменные Ucoz.

Больше статей:   Анализ сайта онлайн быстро и качественно

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

Если на одной странице нужно установить несколько таких спойлеров, тогда нужно сделать следующее.
За спойлер отвечает идентификатор: id="spoiler1"
Именно его и нужно поменять в HTML коде спойлера (он там встречается 2 раза) и вставить весь HTML код с новым идентификатором на страницу, где нужен еще один спойлер. И так столько раз, сколько нужно спойлером на странице.
Но чтобы вас не путать, просто ниже прикладываю код второго спойлера, где spoiler1 я уже заменила на spoiler2.

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

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

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

Больше статей:   Несколько причин, чтобы купить домен

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

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

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

25 комментариев для “🇯🇸 Простой спойлер для сайта”

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

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

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

    1. 3go1st, В статье в разделе «Несколько спойлеров на одной странице» описано как нумеровать спойлеры и размещать несколько спойлеров на одной странице.

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

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

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

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

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

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

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

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

    1. День добрый, 3go1st))) У меня все работает! http://js.do/natrud/42074
      Если Вы работаете на uCoz, в режиме редактирования материала проверьте стоит ли у вас галочка «Заменять переводы строк тегом <BR> «. Этой галочки быть НЕ должно!

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

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

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

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

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

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

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

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

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

Добавить комментарий для Natalie - Web First Step Отменить ответ

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