Спойлер для сайта своими руками
1) Убедимся, что у нас подключена библиотека Jquery (Статья подключение jquery к сайту)
2) Верстаем наш спойлер:
Спойлер 1
Содержимое спойлера haskymix
Вы можете заменить этот текст на любой другой.
3) Пишим скрипт для спойлера:
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; /**делаем ссылку на всю ширину**/
}