Как сделать спойлер на Jquery?

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

Привет. Чтобы постоянно не гуглить, как сделать на Jquery спойлер, решил сам 1 раз написать статью. Тем более, что некоторые найденные мною варианты слишком уж громоздки, я же предложу вам очень компактный вариант, буквально в несколько строк. Соответственно, и реализовать вы его сможете невероятно просто и быстро.

Что потребуется?

Только библиотека jquery, которую нужно подключить к сайту. Если у вас сайт на WordPress, то об особенностях подключения я писал здесь.

Реализуем спойлер

Все будет просто, как 2 пальца об асфальт. Будем считать, что вы уже подключили jquery, тогда там, где вам нужно вывести спойлер, вставляем такой код:

<div>
	<a class="open-spoiler" href="">Кнопка для открытия спойлера >>></a>
	<div class="spoiler-content">
	Контент спойлера (изначально его не будет на странице, откроется при нажатии на кнопку)
	</div>
</div>

Естественно, текст кнопки и сам контент редактируем под себя. Вы можете добавить свои дополнительные css классы к любым элементам для доп. стилизации. Теперь я добавлю в style.css такой код:

.open-spoiler{
	display: block;
	background: red;
	padding: 5px;
	color: #fff;
	width: 350px;
	font-size: 18px;
}
 .spoiler-content{
	display:none;
	padding: 5px;
	background: #efefef;
}

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

Итак, все волшебство выполняет этот код (если вставлять прямо в html, то вот так):

<script type="text/javascript">
    $(document).ready(function(){
    $('.open-spoiler').click(function(){
        $(this).parent().children('div.spoiler-content').toggle('normal');
        return false;
    });
});
</script>

Если же вы хотите вставить код в свой js-файл, то, естественно, убираем теги script в начале и конце.

Очень важно, чтобы скрипт или файл со скриптом подключался к сайту позднее jquery. Если это не сделать, то ничего работать не будет! Библиотека jquery должна загрузиться перед скриптом.

Вот так сделал я:

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

Проверяем результат

Вот что вышло:
готовый jquery спойлер
При нажатии на кнопку происходит плавное появление контента. При повторном клике — плавное исчезновение. Так что вот так, друзья. Это был вариант реализации простого jquery-спойлера.

К слову, я не пользуюсь этим вариантом, но лишь по той причине, что поставил на все wordpress-сайты адаптивную тему Root. Она шикарна и там уже внутри реализованы спойлеры, так зачем мне добавлять еще и свой лишний код?

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: