MENU

Спойлер на страницах сайта


Для скрытия и показа каких-то больших материалов на страницах сайта используются спойлеры. Очень удобная штука! Например Вы хотите в содержимом страницы выложить какую-то характеристику изделия или какой-то html-код, а всё это может быть очень громоздким и занимать очень много места на странице сайта, вот в таких случаях и пригодится спойлер.

Скрипт спойлера очень простой. Он позволяет плавно открывать и закрывать содержимое, которое находится внутри спойлера. Для начала необходимо, если не подключена, то подключить библиотеку jQuery:


< script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
< /script>

Теперь для плавного открытия и закрытия спойлера необходимо добавить в код сайта следующий
JavaScript код:


< script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
$(this).parent().children('div.spoiler_body').toggle('normal');
return false;
});
});
< /script>

Ну а теперь в том месте страницы, где Вы хотите установить спойлер, необходимо установить следующий код:


< div>
< a href="" class="spoiler_links">Спойлер №1 (кликните для показа/скрытия)
< div class="spoiler_body">
Здесь размещается содержимое спойлера
< /div>
< /div>

Чтобы спойлеры изначально при загрузке страниц были закрыты, необходимо в код шапки между тегами <head> и </head> добавить код:


< style type="text/css">
.spoiler_body {display:none; cursor:pointer;}
< /style>

При копировании кодов со страницы не забывайте убрать пробелы между скобками <  >