Загрузка страницы..
Красивый спойлер на jQuery
2016-10-21T02:10 21 окт. 2016 02:10
Просмотров: 9343

Простой и красивый спойлер на Jquery + css.

HTML

<div class="spoiler-wrap disabled">
  <div class="spoiler-head">Заголовок</div>
  <div class="spoiler-body">Текст</div>
</div>

CSS

.spoiler-wrap{background:#fff;margin: 0 0 8px;border:1px solid #efefef}
.spoiler-head{background:#efefef;cursor:pointer;padding:5px;}
.spoiler-body{padding:10px}
.spoiler-wrap.disabled .spoiler-body{display:none}
.spoiler-wrap.active{border-color:#57AA43}
.spoiler-wrap.active .spoiler-head{background:#57AA43;color:#fff}

Javascript

<script>
jQuery(document).ready(function(){
	jQuery('.spoiler-head').click(function(){
		$(this).parents('.spoiler-wrap').toggleClass("active").find('.spoiler-body').slideToggle();
	})
})
</script>

Либо:

<script>
$(function () {
	$('.spoiler-body').hide(300);
	$(document).on('click','.spoiler-head',function (e) {
		e.preventDefault()
		$(this).parents('.spoiler-wrap').toggleClass("active").find('.spoiler-body').slideToggle();
	})
})
</script>


Комментарии: 4

комментарий Оксана
Оксана
2019-03-15T14:5015 марта 2019 14:50
Спасибо большое. Именно то, что нужно!
комментарий Сергей
Сергей
2019-01-24T07:3024 янв. 2019 07:30
Можете подсказать, как в CSS добавить border-radius для рамки и названия спойлера. Буду очень признателен.
комментарий Сергей
Сергей
2018-03-23T11:0323 марта 2018 11:03
Одурительный спойлер. Низкий поклон тебе человек =)
комментарий Max
Max
2017-02-21T23:5021 февр. 2017 23:50
Шикарно!!! Ничего лишнего. Я весь инет перерыл, чтоб такой отыскать. Спасибо за .toggleClass("active")

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

Яндекс.Метрика Яндекс.Метрик