22

Июня 2018

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

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

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

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

<script type="text/javascript"> $(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; /**делаем ссылку на всю ширину**/ }