Универсальный спойлер для сайта
Ранее в теме Собственный спойлер с плавным открытием и скрытием содержимого мы уже предлагали Вам скрипт спойлера с плавным появлением и плавным скрытием содержимого. Но в комментариях к данной теме поступило много просьб по улучшению данного кода.
Теперь мы предлагаем Вам переработанный код спойлера с плавным открытием и скрытием содержимого, который позволяет помимо плавного открытия и закрытия теперь меняем цвет фона заголовка в зависимости от того открыт спойлер или нет. Теперь появилась возможность изначально указывать, какой спойлер должен быть открыт при загрузке странички, плюс сами спойлеры стали намного красивее.
Для ознакомления с работой описанного скрипта спойлера, обратите внимание на спойлеры, расположенные ниже:
ЗАГОЛОВОК НОМЕР 1
ЗАГОЛОВОК НОМЕР 2
ЗАГОЛОВОК НОМЕР 3
Для реализации спойлера, как в примере, продемонстрированном выше, Вам потребуется подключить библиотеку jQuery следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Для того чтобы спойлеры выглядели так же хорошо, как в рассмотренном примере, необходимо добавить в шапку сайта между тегами <head> и </head> CSS стили для них:
<style type="text/css">
.spoiler {
overflow: hidden;
margin-bottom: 20px;
border: 1px solid #BBBBBB;
border-radius: 7px;
box-shadow: 0 0 9px #DDDDDD inset;
}
.title_h3 {
cursor: pointer;
background: #DDDDDD;
margin: 0;
padding: 8px;
border-radius: 7px 7px 0 0;
box-shadow: 0 0 9px #DDDDDD inset;
}
.closed .contents { display: none; }
.closed h3 { background: #BBBBBB; }
.contents { padding: 10px; }
</style>Далее, в том месте Вашей странички, где Вы планируете разместить спойлеры, необходимо добавить следующий код:
<div class="spoiler closed">
<div class="title"><h3 class="title_h3">ЗАГОЛОВОК НОМЕР 1</h3></div>
<div class="contents">Содержимое первого спойлера</div>
</div>
<div class="spoiler">
<div class="title"><h3 class="title_h3">ЗАГОЛОВОК НОМЕР 2</h3></div>
<div class="contents">Содержимое, которое видно при первоначальной загрузке</div>
</div>
<div class="spoiler closed">
<div class="title"><h3 class="title_h3">ЗАГОЛОВОК НОМЕР 3</h3></div>
<div class="contents">Содержимое третьего спойлера</div>
</div>Обращаем Ваше внимание на то, что если Вам необходимо, чтобы какой-нибудь спойлер после загрузки странички был изначально открыт, то стоит указывать <div class="spoiler">.
Если Вам нужен первоначально закрытый спойлер, то тогда добавьте класс closed блоку спойлера: <div class="spoiler closed">.
Далее остается только добавить JavaScript код, который при помощи jQuery будет отвечать за плавное открытие и закрытие спойлеров, а также изменять цвет фона их заголовков:
<script type="text/javascript">
$(".closed").toggleClass("show");
$(".title").click(function(){
$(this).parent().toggleClass("show").children(".contents").slideToggle("medium");
if ($(this).parent().hasClass("show"))
$(this).children(".title_h3").css("background", "#BBBBBB");
else $(this).children(".title_h3").css("background", "#DDDDDD");
});
</script>Надеемся, данный код Вам понравится, и Вы будете использовать подобные спойлеры на своем сайте. При необходимости данные спойлеры можно легко модернизировать и дополнить другими функциями.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
А как сделать фон для контента, отличающимся от фона страницы?
Еще несколько интересных модификаций для данного скрипта можно найти на нашем форуме по ссылке.