I needed to create a simple FAQ page for my Phonegapp app. I found a lot of sample, but all of them were too complicated, I was searching for a simple one.

After a while, I found some useful examples and I put them together to create my FAQ page with HTML, CSS and Javascript.

 The CSS you need is only this:

.content {
    display: none;
}

Also the Javascript snippet is quite short:

function readQuestion(s) {
    $('.content').hide();
    $(s).next('.content').show();
}

And, finally, the HTML:

<h1>FAQ</h1>
<a class="faqlink"><b>Question 1</b></a>
<p class="content" align="justify">
    Answer 1
</p>
<br /><br />
<a class="faqlink"><b>Question 2</b></a>
<p class="content" align="justify">
    Answer 2
</p>

At start, all the question are collapsed. When you click on one of them, it expands itself and close the others, if opened. You can also edit the code to make a question collapse again if clicked when it is open, without open others.

Advertisements