Плавный спойлер для сайта на 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: 6 комментариев

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*