SlideUp / SlideDown Q&A or FAQs (no jQuery)

A Velocity-powered Q&A / FAQs script that reveals hidden answers in a slide-down / slide-up panel. The following actions can be performed within the same page or from another page using a hash;

Works in modern browsers and IE8+ (no slideUp/ slideDown effect in IE8).

Please view the source of this page for HTML markup, CSS and JS.


Key Stage 3


Key Stage 4


Key Stage 5

 

Open questions from another page

Click on links from another page to see how a single answer, a group of answers, or all answers on a page, can be opened via a hash at the end of an URL.

Open questions when the page loads

You can open a question panel when the page first loads with the "item-open" class and style="display:block" inline CSS;

<li>
    <span class="qa-question item-open" data-goto-id="myid"> Question </span>
    <div class="qa-answer" id="myid" data-goto-group="mygroup" style="display:block">
        <!-- open panel Answer content here -->
    </div>
<li>

Related

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.