{tag_name_nolink}

Accordion Style FAQ

24-Dec-2012

If you're looking to create a one page FAQ where the answer slides down in a simple accordion effect, then this should get you on the right track. It is great for keeping all the items on one page and only requires a few minutes to setup.

You'll need jQuery to make this work.

First navigate to (V3) Site Manager > Module Templates > FAQ Layouts.

Use the following markup in your list view:

<div class="faqs">
	<h4><span class="counter">{tag_counter}</span>. <a>{tag_question_nolink}</a></h4>
	<div>
		{tag_answer}
	</div>
</div>

Then in your script file put:

$('.faqs h4').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);
    });
  });

As you can see we are hiding everything inside the first DIV after any .faqs h4 - you can replace the elements with whatever suites your situation, we use this because it's simple.

This leaves you plenty of room to style the title and the answer without many constraints.

Checkout the demo

Subscribe to our newsletter for news, updates, and latest releases by email.

0