{% extends 'page.html' %}

{% block sidebar %}{% endblock %}
{% block content_width %}col-xs-12{% endblock %}

{% block page_content %}
	<h1>FAQs</h1>
	<hr />
	{{ page.content|safe }}
	<div class="row">
		<div class="col-md-4">
			<ul class="faq_questions">
				{% for question in questions %}
					<li {% if not forloop.counter0 %}class="active"{% endif %}>{{ question.question }}</li>
				{% endfor %}
			</ul>
		</div>
		<div class="col-md-8">
			<ul class="faq_answers">
				{% for question in questions %}
					<li {% if not forloop.counter0 %}class="active"{% endif %}><h2>{{ question.question }}</h2><hr />{{ question.answer }}</li>
				{% endfor %}
			</ul>
		</div>
	</div>
{% endblock %}

{% block footerjs %}
<script>
$(document).ready(function() {
	$('.faq_questions li').click(function() {
		$('.faq_questions li.active').removeClass('active');
		$(this).addClass('active');
		
		var index = $(this).index('.faq_questions li');
		$('.faq_answers li.active').removeClass('active').stop().fadeOut(100, function() {
			$($('.faq_answers li')[index]).addClass('active').fadeIn(200);
		});
	});
	
	$('.faq_answers li').hide();
	$('.faq_answers li:first-child').show();
});
</script>
{% endblock %}