Спойлер – это скрытая информация на сайте (текст, изображение и т.д.), которая открывается на странице после нажатия на кнопку или ссылку
Чтобы сделать такой спойлер у себя на сайте сначала вначале HTML странице (или в шаблоне) установите скрипт спойлера:
<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> Далее в нужном месте страницы установите сам спойлер.
<input type="button" >Данный код можно вcтавить на любую HTML сраницу в то место, где нужен спойлер. Содержимое спойлера может быть любое на Ваше усмотрение.
Также этот спойлер можно вставлять и в шаблоны сайта uCoz, а в самом содержимом использовать системные переменные Ucoz.
Несколько спойлеров на одной странице
Если на одной странице нужно установить несколько таких спойлеров, тогда нужно сделать следующее.
За спойлер отвечает идентификатор: id=”spoiler1″
Именно его и нужно поменять в HTML коде спойлера (он там встречается 2 раза) и вставить весь HTML код с новым идентификатором на страницу, где нужен еще один спойлер. И так столько раз, сколько нужно спойлером на странице.
Но чтобы вас не путать, просто ниже прикладываю код второго спойлера, где spoiler1 я уже заменила на spoiler2.<input type="button" >Редактирование кнопки спойлера
Сама кнопка это следующая строка. Чтобы отредактировать кнопку – нужно вносить изменения именно в эту строку:
<input type="button" >Тег <input> применяется для создания различных кнопок, флажков, переключателей и полей для заполнения (форм). У этого тега очень много атрибутов, но для редактирования нашей кнопки мы рассмотрим лишь некоторые.
Атрибут type – в нашем случае только два варианта:
– button – простая кнопка;
– image – кнопка изображение. Применяя этот атрибут не забудьте добавить атрибут src и путь к файлу картинке.<input type="image" src="путь_к_картинке" >Атрибут value – в данном случае текст Вашей кнопки, чтобы его изменить просто введите другой текст;
Атрибут style – можно применить для изменения цвета кнопки и цвета шрифта. За цвет кнопки будет отвечать background, а за текст шрифта color.<input type="button" >И в итоге у Вас может быть такая цветная кнопка:
Также существует еще много вариантов установки спойлера на сайт. Один из них – спойлер с плавным открытием и закрытием.
Если при открытие csv файла с помощью excel У все поехали ячейки - это простой… Read More
Простые шаги как происходит Загрузка проекта на Github и Автодеплой на сервер Сделайте работу проще! Read More
Миграция базы данных - помогают с этим библиотеки SQLAlchemy и Alembic. Read More
Основные Команды Git, которые точно пригодятся. Сохрани себе шпаргалку Git Read More
Установка PostgreSQL на сервер Read More
Как создать PrimaryKey в талице базы данных SQL [РЕШЕНО] Ошибка relation tablename_id_seq doesn't exist Read More
View Comments
Добрый день!
Помогите с решением вопроса по размещению нескольких кнопок на странице. Я уже по всякому попробовал менять имя SPOLER (6шт), но так и не нашел правильное решение.
Артем, отправьте мне Ваш код в личку: admin@web-first-step.ru
а можно как нибудь поменять стиль кнопки. чтобы она была не по размеру текста написанного в ней а больше.и как можно поменять стиль кнопки ?
Vladimir, да конечно. Вы можете кнопку сделать любой с помощью CSS стилей.
неплохо работают, только нумеровать надо spoiiler1 spoiiler2.
нельзя ли как то убрать синюю обводку при нажатии у последней кнопки
Думаю, в моем случае она задана настройками шаблона дизайна сайта. Ее не должно быть в стандартном варианте.
Забыл сказать самое главное: желательно, чтобы спойлеры можно было нумеровать, так как на одной странице их будет не менее трех.
3go1st, В статье в разделе "Несколько спойлеров на одной странице" описано как нумеровать спойлеры и размещать несколько спойлеров на одной странице.
В том виде, в котором Вы дали - не работает, даже совместное использование не работает как спойлер.
Добрый день, 3go1st. Пришлите, пожалуйста, ссылку на свой спойлер, так как я тестировала такой вариант у себя на сайте и все работает.
Со спойлером картинкой Я разобрался, спасибо. У меня еще возникла потребность вот в чем.
Чтобы при клике на слово или картинку, открывался спойлер в другом месте страницы. Например клик на слово ОТКРЫТЬ, открывалось окно с контентом намного ниже или выше от этого слова, допустим слово ОТКРЫТЬ в вверху страницы, а открывается спойлер, где-то в середине, после определенных модулей и текста.
Заранее спасибо за ответ!
Все просто! За кнопку отвечают теги:
Огроменное спасибо. Единственное внятное пояснение из всей той кучи, что я нашла. Особенно про "галочку на Ucoz" - спойлер не раскрывался, пока не сняла эту галку.
И снова здравствуйте))
Столкнулся с проблемой: в случае спойлера в виде картинки, при клике на картинку, показывается скрытый текст буквально секунду и обновляется страница, спойлер соответственно закрывается.
Вот как я прописал код:
<script> function spoiler() { if(document.getElementById('spoiler').style.display == 'none'){ document.getElementById('spoiler').style.display = 'block'; }else{ document.getElementById('spoiler').style.display = 'none'; } } </script> <input type="image" src="путь_к_картинке" >Слово spoiler не нумеровал и не менял, оставил как есть, вместо слова "путь_к_картинке", добавил ссылку на картинку, так что, больше ничего не менял.
День добрый, 3go1st))) У меня все работает! http://js.do/natrud/42074
Если Вы работаете на uCoz, в режиме редактирования материала проверьте стоит ли у вас галочка "Заменять переводы строк тегом <BR> ". Этой галочки быть НЕ должно!
Способ с Youtube сразу отпадает, т.к. этот видеохостинг, скажем так, довольно строгий в отношении модерации, да и на него всегда есть ссылка перехода, т.е. есть возможность уйти с сайта, то что имеется у меня никак не уводит с сайта. Осталось как-то разобраться с автозапуском, может есть способ какой-то ограничительной области, куда можно поместить ссылку, как бы её заморозив. Быть может как-то так: при открытии спойлера открывается картинка с экраном плеера, при клике на неё (картинку) запускается видео. Не подскажете как это реализовать ??
Единственное что могу посоветовать это варианты со всплывающими окнами, так как в таком случае видео будет начинаться только во всплывающем окне. Реализовать можно как через спойлер:
<script> function spoiler() { if(document.getElementById('spoiler').style.display == 'none'){ document.getElementById('spoiler').style.display = 'block'; }else{ document.getElementById('spoiler').style.display = 'none'; } } </script> <input type="button" >так и просо кнопкой:
<a href="javascript://" >Я вот что понял, моя ссылка на видео имеет свойство запускаться автоматически, среди всего текста ссылки я не нашел чего-то, чтобы могло её остановить, может есть какой-то способ остановить ?? Вот пример ссылки: http://n20.filecdn.to/ff/YjkzZDU4ZGI1OTRjNTRkMmI5ZGFmNWUzNTI1ODFjYmV8ZnN0b3wxNTY1MzU3ODYzfDEwMDAwfDJ8MHxmf DIwfDgwZmY3ZjVmOTk1NzY1NGMyMTY3NjkzODA2YWZjMjM0fDB8MjU6bC4xODpyLjMzOjAuMjQ6ei40Oj R8MHwxMjY2MjA0NDAx/play_28dxdv80afkvv.mp4
Я все думала над Вашим видео. Вероятно, автоматический запуск видео зависит именно от настоек сайта, на котором оно находится. Например, на Youtube такого нет. А что если скачать это видео и загрузить на youtube, и на Вашем сайте уже размещать ссылку с youtube?