$(document).ready(function() {
    //hide FAQ elements, prepare for interaction - without JS the FAQs thus appear as a readable list instead
    $('ul.faqs li > ol > li > ul').css({'border': '1px solid #269364'});
    $('ul.faqs li ol li').css({'cursor': 'pointer'});
    $('ul.faqs > li > ol, ul.faqs > li > ol > li > ul').hide();

    //$('ul.faqs li ol li ul, ul.faqs li ol').hide();

    $('ul.faqs li span')
    .css({'cursor': 'pointer'})
    .click(function() {
        var parent = $(this).parent();
        if(parent.hasClass('active')) { // must be the active FAQ
            parent.removeClass('active');
            parent.children('ol').slideUp();
        }
        else { // otherwise inactive at the moment
            parent.siblings().removeClass('active').children('ol').slideUp();
            parent.addClass('active');
            parent.children('ol').slideDown();
        }
    });
    $('ul.faqs li ol > li')
    .click(function() {
        if($(this).hasClass('active')) { // must be the active FAQ
            $(this).removeClass('active');
            $(this).children('ul').slideUp();
        }
        else { // otherwise inactive at the moment
            $(this).siblings().removeClass('active').children('ul').slideUp();
            $(this).addClass('active');
            $(this).children('ul').slideDown();
        }
    });
});