Меню вопросов и ответов

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Честно говоря, это меню я увидел на сайте проекта «Green-coin» (который сейчас «хутко знык», как говорят французы) в разделе «вопрос-ответ» и решил его вычленить и предоставить на своей странице. Сначала, было даже неловко, что позаимствовал код, но теперь, после такого «кидалова» с их стороны, больше не испытываю мук совести.

Если Вы скачали архив, распакуйте его в отдельную папку на компьютере и взгляните, что там внутри. А там должны находиться две папки (css и js) и файл demo.html. Откройте последний в вашем браузере, меню должно работать. Все файлы в кодировке UTF-8, поэтому, если будет некорректное отображение, файлы нужно перекодировать.

Установка на сайт

1. Файлы из папок css и js закачайте в одноименные папки на сайт, а если таковых не обнаружено, то обе папки следует разместить в корневой папке сайта или в любой другой, но с условием, чтобы они находились в одной директории с файлом создаваемой страницы. Это файлы стилей и скрипты, любезно предоставленные Bootstrap. Их не нужно редактировать.

2. Код для вставки в head. Здесь прописано подключение стилей, библиотеки jQuery, код вызова скрипта bootstrap.js и скрипт вызова функции:

<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//    $(".question").click(function(){
//		if($(this).children("span").text() == "+"){
//			$(this).children("span").text("-");
//			$(this).parent().addClass(" active");
//		}else{
//			$(this).children("span").text("+");
//			$(this).parent().removeClass("active");
//		}
//		$(this).next().toggle();
//		return false;
//	});
    $(".collapse").collapse({
        toggle: true
    });
});
</script>

3. Код для вставки в body:

<div class="inner"><h1 class="pagetitle">Вопрос-ответ</h1></div>
<div class="inner" id="content">
<div class="accordion collapse" id="accordion2" style="margin-bottom: 20px;">


<div class="accordion-group" style="background-color: white">
<div class="accordion-heading">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a class="accordion-toggle btn btn-info collapsed" 
data-toggle="collapse" data-parent="#accordion2" 
href="//домен/папка/#collapse1">
Пишем вопрос
</a>
</div>
<div id="collapse1" class="accordion-body collapse in">
<div class="accordion-inner">
Пишем ответ 
</div>
</div>
</div>


------------------------------
Сюда вставляйте очередные блоки
------------------------------

</div>
</div>
	 

4. Блоков у нас будет в любом случае больше, чем один, поэтому для воспроизведения серии, необходимо просто клонировать среднюю часть кода (в таблице чуть ниже) столько раз, сколько понадобится:

 


<div class="accordion-group" style="background-color: white">
<div class="accordion-heading">
<span class="ui-icon ui-icon-triangle-1-e"></span>
<a class="accordion-toggle btn btn-info collapsed" 
data-toggle="collapse" data-parent="#accordion2" 
href="//домен/папка/#collapse2">
Пишем вопрос
</a>
</div>
<div id="collapse2" class="accordion-body collapse in">
<div class="accordion-inner">
Пишем ответ 
</div>
</div>
</div>

В каждом очередном блоке в двух местах нужно проставлять порядковый номер collapse. В первом блоке - 1, во втором - 2, и т. д. до победного конца.

Спасибо за внимание. Надеюсь, ничего сложного и всё понятно. Желаю успехов! L.M.