Спойлер на html – Полезный тег «details» в HTML5 для создания спойлера

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

А это содержимое спойлера. Тут может быть все, что угодно. Используйте любые HTML-теги.

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

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

<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» value=»Нажми меня»> <p><br></p> <div> А это содержимое спойлера. Тут может быть все, что угодно. Используйте любые HTML-теги. <hr> </div>

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

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

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

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

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

<input type=»button» value=»Нажми меня»>

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

<input type=»image» src=»путь_к_картинке» value=»Нажми меня»>

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

<input type=»button» value=»Нажми меня»>

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

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

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

stepfor.top

Стильные спойлеры на CSS3 и jQuery — Уникальные скрипты и готовые решения для сайта

.wrapper {

width: 820px;

margin: 10px;

padding: 0;

}

.wrapper > li {

display: inline;

margin: 0;

}

.info-box-green, .info-box-red, .info-box-sky {

margin: 50px auto;

padding: 0;

width: 480px;

-webkit-box-shadow: 0 8px 6px -6px black;

-moz-box-shadow: 0 8px 6px -6px black;

box-shadow: 0 8px 6px -6px black;

}

.info-box-red h5 {

-webkit-border-radius: 10px;

border-radius: 10px;

margin-bottom: -10px;

}

.info-box-red > .info-content > .text {

-webkit-border-radius: 0 0 10px 10px;

border-radius: 0 0 10px 10px;

}

.info-box-green h5, .info-box-green > .info-content > .text {

background-color: #00AB83;

}

.info-box-red h5, .info-box-red > .info-content > .text {

background-color: #FF434C;

}

.info-box-sky h5, .info-box-sky > .info-content > .text {

background-color: #00A5C3;

}

.info-box-green h5, .info-box-red h5, .info-box-sky h5 {

padding: 25px;

font-size: 1.125em;

font-weight: 400;

color: #FFF;

}

.info-box-green > .info-content > .text, .info-box-red > .info-content > .text, .info-box-sky > .info-content > .text {

padding: 0px;

font-size: 1em;

line-height: 1.5em;

height: 0;

color: #FFF;

overflow: hidden;

-webkit-transition:  height 200ms ease;  

-moz-transition:  height 200ms ease;  

-o-transition:  height 200ms ease;  

transition:  height 200ms ease;

}

.info-box-green > .info-content > .text > p, .info-box-red > .info-content > .text > p, .info-box-sky > .info-content > .text > p {

padding: 20px 20px 60px;

}

.info-box-sky > .info-content > .text {

background-color: #FFF;

color: #444;

border-radius: 0;

}

.info-box-green > .info-content > .text.open-green, .info-box-red > .info-content > .text.open-red, .info-box-sky > .info-content > .text.open-sky {

display: block;

height: auto;

}

.info-box-green > .info-content > span.close-green, .info-box-red > .info-content > span.close-red, .info-box-sky > .info-content > span.close-sky {

-webkit-transform:rotate(135deg);

-moz-transform:rotate(135deg);

-o-transform:rotate(135deg);

-ms-transform:rotate(135deg);

}

.info-box-green span, .info-box-red span, .info-box-sky span {

display: inline-block;

float: right;

position: relative;

bottom: 60px;

right: 10px;

margin: 0;

padding: 10px;

color: #FFF;

font-size: 2em;

cursor: pointer;

/*  Rotate ‘+’ to ‘X’ */

-webkit-transition: all 600ms ease-in-out;

-moz-transition: all 600ms ease-in-out;

-o-transition: all 600ms ease-in-out;

-ms-transition: all 600ms ease-in-out;

transition: all 600ms ease-in-out;

}

.info-box-sky > .info-content > span.close-sky {

color: #444;

}

.info-box-red span {

position: relative;

bottom: 50px;

right: 10px;

}

imapo.ru

Простой спойлер на HTML и CSS

Простой спойлер на чистом HTML и CSS. Логика работы неявна – но работает, хотя и есть нюансы.

Особенности:

• Требует наличия подключенного файла css – причем сам файл при этом может быть пустым
• Требует определения классов элементов (см. код) – при этом классы могут быть не определены
• При нескольких спойлерах наименования классов элементов должны совпадать
• Допускается вложенность, без ограничений – при этом должны соблюдаться моменты, описанные выше
• Закрытие/открытие происходит по клику – при перезагрузке страницы, даже после очистки кэша, спойлер остается в последнем положении
• Закрывающий/открывающий элемент может быть любой – картинка, кнопка (<button>Спойлер</button>), теги span, div. При этом button должно быть без class; при отсутствии class в div или span будет элемент в виде текста

Между <head></head>:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css">
<title>Простой спойлер на HTML и CSS</title>

Между <body></body>:

<h2>Простой спойлер на HTML и CSS</h2>

<div>
    <label>
        <input type="checkbox"/>
    <button>Первый спойлер - button</button>
        <div>
        Первый спойлер: текст или другое содержимое
     </div> 
     </label>
 </div>

<div>
    <label>
        <input type="checkbox"/>
    <div>Второй спойлер - div</div>
        <div>
        Второй спойлер: текст или другое содержимое
     </div> 
     </label>
 </div>

<div>
    <label>
        <input type="checkbox"/>
    <span>Третий спойлер - span</span>
        <div>
        Третий спойлер: текст или другое содержимое
     </div> 
     </label>
 </div>

<div>
    <label>
        <input type="checkbox"/>
    <img src="spoiler.jpg" alt="Спойлер" title="Спойлер">
        <div>
        Четвертый спойлер: текст или другое содержимое
     </div> 
     </label>
 </div> 

coderhs.com

Создаем свой собственный спойлер для сайта

147

543

Предлагаем Вам совсем простой и небольшой по своему размеру JavaScript код, который позволит Вам использовать на своем сайте спойлеры для показа/скрытия объемных материалов.

Для наглядного примера работы предлагаемого нами скрипта, обратите внимание на спойлер, находящееся чуть ниже:

Спойлер (кликните для показа/скрытия)

Для получения точно такого же спойлера, как в примере чуть выше, добавьте на свой сайт следующий JavaScript код:

JavaScript код:

Далее, в том месте Вашей странички, где Вы планируете использовать спойлер, необходимо добавить следующий код:

HTML код:

Вместо текстовой надписи «Спойлер (кликните для показа/скрытия)» можно использовать какую-нибудь картинку:

HTML код:

Так же не забываем добавить стили для наших спойлеров. Для этого добавьте следующий код в шапку сайта между тегами <head> и </head>.

HTML код:

Вот и все. В результате использования данного скрипта у Вас должен получиться простой спойлер, который поможет Вам сэкономить немало места на сайте и сконцентрировать внимание Ваших посетителей на самом главном.

Дата создания: 15:02:37 06.11.2011 г.

Дата обновления: 22:36:47 08.03.2012 г.

Посещений темы: 33200 раз(а).

Если Вы хотите задать какой-либо вопрос, то лучше сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

usefulscript.ru

Спойлер в HTML | Any People’s blog

Пост о том, как создать спойлер средствами HTML и JS.
Ниже — рабочий код, рассмотрен по частям.

1. Эта часть превращает курсор в руку при наведении на спойлер.

<style>
    .spoilertop {cursor:pointer;}
</style>/>/>

2. Собственно, сам скрипт спойлера. Вставляйте его в конец страницы.

<!—Собственно, сам скрипт спойлера—>
    <script language=»JavaScript» type=»text/javascript»>
    function openClose(id)
    {
    var obj = «»;

    // Check browser compatibility
    if(document.getElementById)
    obj = document.getElementById(id).style;
    else if(document.all)
    obj = document.all[id];
    else if(document.layers)
    obj = document.layers[id];
    else
    return 1;

    // Do the magic
    if(obj.display == «»)
    obj.display = «none»;
    else if(obj.display != «none»)
    obj.display = «none»;
    else
    obj.display = «block»;
    }
    </script>
    <!—/Собственно, сам скрипт спойлера—>

3. Спойлер. Вставляйте этот кусок туда, где хотите ваш спойлер расположить

<!—Титл спойлера №1—>
    <div>
    Заголовок спойлера
    </div>
    <!—Содержание спойлера—>
    <div>
    Тут пишем то, что будет под спойлером.
    </div>

3. Второй спойлер.

<!—Титл спойлера №2—>
    <div>
    Заголовок спойлера
    </div>
    <!—Содержание спойлера—>
    <div>
    Тут пишем то, что будет под спойлером.
    </div>

Если нужно поставить несколько спойлеров, то в последующих спойлерах меняйте цифру 1 на соответствующую. как показано в примере второго спойлера. Глянуть результат

blog.any-p.ru