Красивая страница FAQ с выпадающим списком на jQuery

Здравствуйте, друзья. Я давно искал в сети страницу FAQ на jQuery и никак не мог найти ничего подходящего. Из готовых скриптов jQuery тоже не удалось ничего извлечь. Поэтому решил сделать самостоятельно, что называется, из подручных средств, такую страницу, как готовый плагин, чтобы можно было реализовать на любом сайте или вынести в отдельную страницу. На мой взгляд получилось довольно симпатично и более того, JS функция выпадающего списка уместилась в несколько строк прямо на странице. Это не то, что в прошлом посте: 19 красивых эффектов модального окна, где файл сценария содержит целую кучу кода. Здесь все намного проще. Давайте посмотрим пример.

Демо

Впрочем вы можете уже на основе этого готового шаблона сделать себе страницу вопросов и ответов. А если все же хотите интегрировать эту функцию на своей сайт, то здесь тоже нет ничего сложного. Давайте разберем по порядку. Для начала подключим саму библиотеку jQuery, если конечно она у вас еще не подключена.

<script type="text/javascript" src="jquery.js"></script>

Затем на странице между тегами head размещаем функцию скрипта.

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript">
		/* accessible */
		$(document).ready(function() {
			$('#faqs li').each(function() {
				var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
				tis.click(function() {
					state = !state;
					answer.slideToggle(state);
					tis.toggleClass('active',state);
				});
			});
		});
</script>

1
2
3
4
5
6
7
8
9

.faq{list-style:url(img/left.gif);}
#faqs {position:relative;}
	#faqs li{ cursor:pointer; font-size:20px; margin-bottom: 3px;}
	#faqs li.active	{ color:#d74646; list-style:url(img/niz.gif);text-shadow: none;}
	#faqs div { height:0; overflow:hidden; position:relative; }
	#faqs div p{ background: #ffffcc; border: 1px solid #999; border-radius: 8px; padding: 6px; margin:15px 0 15px; position:relative;}
 
.ugol:before{content: url(img/ug.png);top: -14px; position: absolute; left: 77px;
}

Ну и сама HTML разметка на странице выглядеть будет так:

1
2
3
4
5
6
7
8

<div id="faqs">
<ul class="faq">
<div>
<li>Вопрос</li>
	<p class="ugol">Ответ на вопрос</p>
</div>
</ul>
</div>

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

СКАЧАТЬ