Плавный спойлер для сайта на jQuery — Записки программиста

Плавный спойлер для сайта на jQuery. Введение

Плавный спойлер для сайта на jQuery Иногда бывает необходимо скрывать часть информации на сайте, это может быть связано с экономией места, для отображения дополнительной информации, для избежания преждевременного отображения текста, и тд. Обычно спойлер, раскрывается и скрывается по клику по его заголовку или специальной кнопке. В данной статье я хочу показать пример реализации спойлера на jQuery, который будет плавно отображать и скрывать текст. Все что нам потребуется — это библиотека jQuery.

Спойлер для сайта на 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>

и теперь самое интересное — javaScript, который оживит наш спойлер:

$(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);
		}
	});
});

Вот и все, осталось только выложить исходники — вот они.

Плавный спойлер для сайта на jQuery: 7 комментариев

Классный и лёгкий спойлер, всего несколько строк кода. Забрал себе.Попробую на блог прикрутить. Сенкс

Ответить

что делать, если нужно добавить несколько спойлеров на страницу?
ваш скрипт открывает сразу все .spoiler_block

Ответить

Добрый:

15.09.2015 в 07:30

.spoiler_block в переди тег поставь, может получится…

Ответить

Попробовал на DLE установить. Может это заморочки движка, но не скрывает списки
[list]
[*]текст
[*]текст
[/list]

Ответить

Спасибо дружище, искал именно такой вариант, так как есть одна штука как табы, в которой присутствует в ксс параметр
.content div{
display:none;
}
И при этом куча спойлеров не пашет просто. А у этого дивов нет только спанами, шикарное решение. Спасибо.

Ответить