I’ll try to fill this post with as many relevant key words as possible given it took me a while to find an answer for what I was looking for. I needed to construct a Q&A section of a website, or frequently asked question (FAQ) list, and it was getting too long to have both the questions and answers visible without the page seeming overwhelming. I dug around for a while looking for the solution to this problem which I’ve seen used on various websites, and that is to have the FAQ built where only the question shows, and if you click on it, the answer drops down / flys out below it, but otherwise, is not taking up visible space in the page.
On the off chance that site/link goes away at some point, I’ll include the code here too, with credit to Prasad Jadhav for posting it (assuming he’s the original author of the code).
HTML sample code:
<div id="QA"> <ul> <li>Question 1</li> <li>Answer 1</li> <li>Question 2</li> <li>Answer 2</li> </ul> <ul> <li>Question 3</li> <li>Answer 3</li> <li>Question 4</li> <li>Answer 4</li> </ul> </div>