Спойлер на Jquery Создаем тело спойлера: <div class="spoler-item">
<div class="spoler-title"> Заголовок спойлера </div>
<div class="spoler-body"> Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия. </div>
</div>

Далее код

$(function () {
$('.spoler-body').hide(300);
$(document).on('click','.spoler-title',function (e) {
e.preventDefault()
$(this).parents('.spoler-item').toggleCl ass("active").find('.spoler-body' ).slideToggle();
})
})

Теперь добавим возможность сокрытия одного спойлера, при открытии другого.

$(function () {
$('.spoler-body').hide(300);
$(document).on('click','.spoler-tit le',function (e) {
$('.spoler-item').removeClass('active');
$(this).parents('.spoler-item').addClass ("active");
$(".spoler-body").hide();
$(this).siblings('.spoler-body').show();
e.preventDefault();
}) });

Добавляем плавность при открытии спойлера

$(function () {
$('.spoler-body').hide(300);
$(document).on('click','.spoler-title',function (e) {
$('.spoler-item').removeClass('active');
$(this).parents('.spoler-item').addClass ("active");
$(".spoler-body").hide();
$(this).siblings('.spoler-body').slideToggle("slow");
e.preventDefault();
})
});

Добавляем плавное сворачивание спойлера при открытии другого

$(function () {
$('.spoler-body').hide();
$(document).on('click','.spoler-title',function (e) {
$('.spoler-item').removeClass('active');
$(this).parents('.spoler-item').addClass ("active");
$(".spoler-body").slideUp(300);
$(this).siblings('.spoler-body').slideToggle("slow");
e.preventDefault();
})
});

Не забываем добавить display: none для того что бы скрыть все спойлеры по умолчанию.

.spoler-body { display: none; }

Итог, получаем отличный спойлер который сослужит Вам хорошую службу )

Заголовок спойлера
Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.
Заголовок спойлера
Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.
Заголовок спойлера
Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.
Заголовок спойлера
Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.
Заголовок спойлера
Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.
Заголовок спойлера
Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.

С уважением

Заявка на создание сайта
Быстрая заявка на создание сайта
Введите имя
Введите Email
Название компании
Введите телефон
Введите описание задачи