Expand Content for FAQs

Simple Javacript Help

[TimmyMagic]

Hi,

I would like to use some javacript to improve the look and functionality of an FAQ page I am in the process of building. Rather than have a long page of questions and answers, I'd like to have all the answers hidden from view, and when the user clicks on the question link, the answer expands. When the user clicks on another question I want any other answers to hide. So only one answer shows at any one time.

I have look around the net for something suitable but many are a bit too complex for what I need, or they use images, or they allow multiple answers to be shown. I don't know enough about javascript to fiddle around with the code, so am hoping the good folk here can help a javascript novice.

Any help greatly appreciated.

Tim

[Trace]

A quick and easy way would be like this;

CSS

<style type="text/css">
.hiddenAnswer{
display:none;
}
.showAnswer{
display:block;
}
</style>

JavaScript

<script type="text/javascript">
function showAnswer(ansID){
var numberOfQuestions = 5;
for(var i=1;i<=numberOfQuestions;i++){
document.getElementById('divAnswer'+i).className = 'hiddenAnswer';
}
document.getElementById(ansID).className = 'showAnswer';
}
</script>

HTML

<p><a href="question1.html" onclick="showAnswer('divAnswer1'); return false;">Lorem ipsum dolor sit amet</a><br />
<div id="divAnswer1" class="hiddenAnswer">
consectetuer adipiscing elit. Curabitur mollis erat ut sem. Maecenas justo massa, nonummy in, venenatis a, pellentesque eu, purus. Ut et mauris sit amet dui fermentum sollicitudin. Ut suscipit, dolor quis faucibus semper, tellus nisi sollicitudin pede, vel egestas eros sem ac lacus. Vestibulum nec tellus. Aenean consectetuer nunc accumsan ante. Praesent aliquam semper arcu. Phasellus est neque, tincidunt et, facilisis ornare, euismod at, nibh. Donec pulvinar dui quis nunc. Cras vehicula faucibus nisl. Duis et risus vitae quam pulvinar venenatis. Pellentesque gravida placerat velit.
</div>
</p>

<p><a href="question2.html" onclick="showAnswer('divAnswer2'); return false;">Maecenas eleifend mauris sit </a><br />
<div id="divAnswer2" class="hiddenAnswer">
amet lacus tincidunt pulvinar. Vestibulum ac libero. Duis lacus nulla, mollis sed, rhoncus interdum, pretium eget, lorem. Duis malesuada lobortis felis. Donec euismod, ipsum quis venenatis pellentesque, sapien risus consectetuer dolor, a fringilla nibh turpis eget neque. Maecenas est lacus, sollicitudin quis, posuere quis, dignissim a, justo. Donec eget erat. Nullam elementum lorem eget urna. Duis elit. Donec ipsum. Aenean quam. Sed nisl sapien, tincidunt quis, tincidunt quis, condimentum id, nulla. Cras eu augue eu odio molestie fringilla. Aliquam egestas odio vel risus.
</div>
</p>

<p><a href="question3.html" onclick="showAnswer('divAnswer3'); return false;">Curabitur malesuada leo vel risus. </a><br />
<div id="divAnswer3" class="hiddenAnswer">
Mauris et purus. Etiam odio erat, mattis et, malesuada et, accumsan feugiat, eros. Quisque tempus justo id sem. Suspendisse potenti. Duis tincidunt urna non diam. Nam fermentum sem elementum massa feugiat faucibus. Proin malesuada commodo sapien. Mauris vitae sapien. Praesent a risus et orci eleifend ullamcorper. Vivamus enim urna, nonummy facilisis, tincidunt pellentesque, congue ac, neque. Aliquam vulputate magna quis est. Curabitur vitae sem.
</div>
</p>

<p><a href="question4.html" onclick="showAnswer('divAnswer4'); return false;">Curabitur ultrices. Cras vestibulum ante </a><br />
<div id="divAnswer4" class="hiddenAnswer">
ut massa vulputate pretium. Donec euismod volutpat nunc. Nam arcu augue, sodales nec, viverra id, suscipit at, ipsum. Sed ipsum ipsum, vestibulum quis, mattis eu, condimentum a, ipsum. Ut eget orci scelerisque purus eleifend fermentum. Nam a odio in pede gravida ullamcorper. Proin enim lorem, dignissim vel, vestibulum ac, viverra id, turpis. Phasellus ultricies ullamcorper metus. Nullam pulvinar fringilla dolor. Nunc posuere urna pulvinar nisi. Mauris ut augue. Aenean a nisi. Donec viverra varius nisl. Etiam non elit eget justo nonummy blandit.
</div>
</p>

<p><a href="question5.html" onclick="showAnswer('divAnswer5'); return false;">Fusce sed augue. Integer tempor </a><br />
<div id="divAnswer5" class="hiddenAnswer">
laoreet quam. Aenean at augue. Aliquam vitae pede cursus dolor tincidunt aliquam. Sed vel libero vel dolor consequat hendrerit. Integer pulvinar est vitae eros. Cras non justo quis nibh malesuada vehicula. In nisi lacus, dictum nec, ultricies eget, auctor ut, nisl. Aenean ut felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fermentum viverra felis. Proin facilisis tincidunt quam.
</div>
</p>

There are numerous different ways to achieve the same effect, most probably better than this way but it should get you started.

Hope it helps.

[TimmyMagic]

Thanks Trace. This works perfectly.

Tim

[TimmyMagic]

I was just wondering what the effect would be if a user didn't have javascript enabled (I don't know the % of these users, but I guess it's small). Would the hidden content be shown or would they only see the questions?

Tim

[Trace]

They would only see the questions, but;

<a href="question5.html" onclick="showAnswer('divAnswer5'); return false;">

For those with JavaScript enabled they would trigger the showAnswer funtion and those with JavaScript turned off they would be directed to question5.html.