данной статье я хочу показать пример реализации спойлера на jQuery, который будет плавно отображать и скрывать текст. Все что нам потребуется — это библиотека jQuery.
Ниже приведен код. Начнем с верстки:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Плавный спойлер для сайта на jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
.spoiler_title{
font-size: 16px;
border-bottom: #000000 dashed 1px;
cursor: pointer;
}
.spoiler_block{
display: none;
}
</style>
</head>
<body>
<label class="spoiler_title">Заголовок спойлера(Кликайте!)</label>
<p class="spoiler_block">
Текст спойлера, который отображается по клику на заголовок.
<br/> Вторая строка
</p>
</body>
</html>
$(document).ready(function(){
$('.spoiler_title').click(function(){ // при клике по заголовку спойлера
var show = $(this).attr('show'); // проверяем атрибут, в котором записано - отображен спойлер или скрыт
if(show == 1){ // если отображен, то прячем
$(this).attr('show', 0);
$('.spoiler_block').slideUp(300);
}else{ // если спрятан, то показываем
$(this).attr('show', 1);
$('.spoiler_block').slideDown(300);
}
});
});