Спойлер для сайта своими руками
1) Убедимся, что у нас подключена библиотека Jquery (Статья подключение jquery к сайту)
2) Верстаем наш спойлер:
<![CDATA[
<!-----Спойлер 1------->
<div class="spoiler-block">
<a href="#" class="spoiler-title">Спойлер 1</a>
<div class="spoiler-content">
Содержимое спойлера haskymix</br>
Вы можете заменить этот текст на любой другой.
</div>
</div>
]]>
3) Пишим скрипт для спойлера:
<![CDATA[
<script >
$(document).ready(function(){
$('.spoiler-title').click(function(){
$(this).parent().children('div.spoiler-content').toggle('fast');
return false;
});
});
</script>
]]>
4) Пропишем стили для спойлера:
<![CDATA[
.spoiler-content{
display:none; /**скрываем блок контента спойлера**/
padding:15px 20px; /**добавляем внутренний отступ**/
}
]]>
Стили для привлекательности спойлера:
<![CDATA[
/**Стили блока с текстом внутри спойлера**/
.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; /**делаем ссылку на всю ширину**/
}
]]>
