Join our HiFi mailing list to receive the latest news & updates

jQuery Frequently Asked Questions (FAQ)


This snippet is designed to set up an expandable/collapsible FAQ page. Its content is driven by its subpages, making it easy to manage. It also updates and reads the url hash so it is possible to link to individual questions.


jQuery is required for the javascript.



{% for question in hifi.get({type: 'page', inMenu: true, orderBy: this.orderBy, parent: }) %}
<article class="question" id="{{ question.url|replace('/','-') }}">
    <h5><a href="#{{ question.url|replace('/','-') }}">{{ loop.index }}. {{ question.title }}</a></h5>
    <div class="question-content hidden">
        {{ question.content }}
{% endfor %}


.question {
    position: relative;
    .question h5 a {
        text-decoration: none;
    .question h5 a:hover {
        text-decoration: underline;
    .question .hidden {
        display: none;


    $('.question .hidden').hide().removeClass('hidden');
            var $content = $(this).find('.question-content');
            if(!$':visible')) $content.slideDown();
            var $content = $(this).find('.question-content');
            if($':visible')) $content.slideUp();
            var $content = $(this).find('.question-content');
            if($':visible')) $(this).trigger('hide');
            else $(this).trigger('show');
    $('.question h5 a').click(function(){


To install this snippet, you first need to create a page in your site tree that you will use for the FAQ. Then you need to create a page-specific template in your theme editor to target this page. Then copy in the template from this snippet and include the CSS and JS for your site. Everything should then be working!


  1. There are no comments yet.