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

  Александр Маврин   4 комментария

Иконка FAQЗдравствуйте, друзья. Я давно искал в сети страницу 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 плагин и экспериментируйте. И еще, если вы собираетесь пользоваться этим скриптом, то не забудьте поделиться этой записью в социальных сетях, кнопочки находятся чуть ниже. Премного благодарен. 😉

СКАЧАТЬ

Не стесняйтесь делиться записью в социальных сетях. Спасибо

4 комментария
  1. Красиво получается, спасибо, внедрим!

  2. Ухты! 😯 Спасибо! Сейчас исправлю.

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

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