Понравилась статья?Поделись с друзьями!

Рейтинг:   / 15
ПлохоОтлично 

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


В этой статье мы рассмотрим как сделать спойлер для сайта.
Наш спойлер будет выполнен в нескольких вариантах это спойлер для сайта html,спойлер сделанный в css и в javascrypt.
Если Вам нужно более глубоко вникнуть в тему спойлеров, то нужно выяснить что такое яваскрипт и познать его основы. Спойлер представляет собой скрытую информацию, которая становится видимой для пользователя после нажатия на соответствующую кнопку или ссылку.

Рассмотрим простейшую функцию:
function toggle(id)
{
    var el = document.getElementById(id);
    el.style.display = (el.style.display != 'none') ? 'none' : '';
}

Сначала, впрочем как и всегда, мы получаем объект. Далее определяем значение свойства display:
el.style.display != 'none'

'none' - означает, что элемент скрыт и не занимает места на экране (но не в документе, он по-прежнему находится в DOM);
'' (пустые кавычки) - означает, что браузер сам определит свойство по названию тега (то есть block).
Тернарным оператором определяем, каким будет новое свойство после клика (или любого другого действия, которое может вызвать нашу функцию).

Все, функция готова! Можем приступать к применению :)

Наиболее удачным назначением станет спойлер для сайта.
Кто не знает определения - спойлер это скрывающийся/показывающийся контент (текст/изображение).


Коды спойлера для сайта


CSS код спойлера:
@import url(http://fonts.googleapis.com/css?family=Forum&subset=cyrillic,latin);
#spoiler {
    width:300px;
}
#spoiler_title {
    font:18px 'Forum', cursive;
    padding:2px 5px;
    color:#f0f0f0;
    cursor:pointer;
   
    /* Border Radius */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
   
    /* Gradient */
    background: rgb(30, 115, 201);
    background: -moz-linear-gradient(90deg, rgb(30, 115, 201) 0%, rgb(90, 143, 255) 100%);
    background: -webkit-linear-gradient(90deg, rgb(30, 115, 201) 0%, rgb(90, 143, 255) 100%);
    background: -o-linear-gradient(90deg, rgb(30, 115, 201) 0%, rgb(90, 143, 255) 100%);
    background: -ms-linear-gradient(90deg, rgb(30, 115, 201) 0%, rgb(90, 143, 255) 100%);
    background: linear-gradient(90deg, rgb(30, 115, 201) 0%, rgb(90, 143, 255) 100%);
}
#spoiler_title:hover {
    background: rgb(30, 115, 221);
    background: -moz-linear-gradient(90deg, rgb(30, 115, 221) 0%, rgb(90, 143, 255) 100%);
    background: -webkit-linear-gradient(90deg, rgb(30, 115, 221) 0%, rgb(90, 143, 255) 100%);
    background: -o-linear-gradient(90deg, rgb(30, 115, 221) 0%, rgb(90, 143, 255) 100%);
    background: -ms-linear-gradient(90deg, rgb(30, 115, 221) 0%, rgb(90, 143, 255) 100%);
    background: linear-gradient(90deg, rgb(30, 115, 221) 0%, rgb(90, 143, 255) 100%);
}
#spoiler_container {
    margin:0 3px;
    border:1px solid #f0f0f0;
    padding-bottom:5px;
   
    /* Border Radius Bottom */
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
   
    /* Gradient */
    background: rgb(247, 247, 255);
    background: -moz-linear-gradient(227deg, rgb(247, 247, 255) 0%, rgb(252, 252, 255) 100%);
    background: -webkit-linear-gradient(227deg, rgb(247, 247, 255) 0%, rgb(252, 252, 255) 100%);
    background: -o-linear-gradient(227deg, rgb(247, 247, 255) 0%, rgb(252, 252, 255) 100%);
    background: -ms-linear-gradient(227deg, rgb(247, 247, 255) 0%, rgb(252, 252, 255) 100%);
    background: linear-gradient(227deg, rgb(247, 247, 255) 0%, rgb(252, 252, 255) 100%);
}
#spoiler_content {
    font:16px 'Forum', cursive;
    padding:2px 5px;
    color:#333;
}

 JavaScript код спойлера:
function toggle(id)
{
    var el = document.getElementById(id);
    el.style.display = (el.style.display != 'none') ? 'none' : '';
}


HTML код спойлера:
<div id="spoiler">
    <div id="spoiler_title" onclick="toggle('spoiler_content')">Кликни на меня</div>
    <div id="spoiler_container">
        <div id="spoiler_content">Какой-то текст....<br /> И еще текст</div>
    </div>
</div>

Ну вот собственно и всё теперь вы сможете добавить себе на сайт код спойлера и всё ничего сложного в этом нет,нужны лишь прямые руки.
Заключение.
Не стоит пугаться большого объема CSS кода. Градиенты и скругления помогут сделать специальные сервисы.

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


Защитный код
Обновить

Комментарии  

 
Антон
+1 # Антон 20.05.2014 08:19
Скажите, как сделать,чтоб он на одной странице скрывал несколько блоков и открывал по клику каждый свой блок
Ответить | Ответить с цитатой | Цитировать
 

Дополнительная информация