Спойлер для сайта своими руками

Спойлер для сайта своими руками

Спойлер для сайта своими руками

1) Убедимся, что у нас подключена библиотека Jquery (Статья подключение jquery к сайту)
2) Верстаем наш спойлер:

<div class="spoiler-block">
    <a href="#" class="spoiler-title">Спойлер 1</a>
    <div class="spoiler-content"> 
       Содержимое спойлера haskymix</br>
       Вы можете заменить этот текст на любой другой.
    </div> 
</div>

3) Пишим скрипт для спойлера:

<script> 
    $(document).ready(function(){ 
        $('.spoiler-title').click(function(){ 
            $(this).parent().children('div.spoiler-content').toggle('fast');
            return false;
        });
    });
</script>

4) Пропишем стили для спойлера:

.spoiler-content{
    display:none;  /**скрываем блок контента спойлера**/
    padding:15px 20px; /**добавляем внутренний отступ**/
}

Стили для привлекательности спойлера:

/**Стили блока с текстом внутри спойлера**/
.spoiler-content{
    display:none;  /**скрываем блок контента спойлера**/
    padding:15px 20px; /**добавляем внутренний отступ**/
    border:1px solid #ccc; /**рамка блока контента спойлера**/
    margin-top:5px; /**отступ сверху**/
    background:#F0F0F0; /**фон блока контента спойлера**/
}
/**Стили блока оборачивающего каждый блок**/
.spoiler-block{
    margin-top:10px; 
}
/**Стили кнопки спойлера**/
.spoiler-title {
    border:1px solid #B9B9B9;
    background: #ccc;/**обычный фон для браузеров, которые не поддерживают градиент**/
    background:linear-gradient(#CACACA, #E8E8E8);/**градиентный фон**/
    padding:10px;/**внутренний отступ**/
    text-decoration:none;/**убираем подчёркивание у ссылки**/
    color:#000; /**цвет текста ссылки**/
    display:block; /**делаем ссылку на всю ширину**/
}