How to create expandable FAQ page in HTML?
Here a possible approach:
<html><body><script>
function toggleElement(id)
{
if(document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = '';
}
else
{
document.getElementById(id).style.display = 'none';
}
}
</script>
<p>
<a href="javascript:toggleElement('a1')">Is this a question?</a>
</p>
<div id="a1" style="display:none">
This is an answer.
</div>
</body>
</html>
Simple example using jQuery:
JavaScript/jQuery
<script type="text/javascript">
$(document).ready(function(){
$('.faqlink').click(function(){
$('.content').hide();
$(this).next('.content').show();
});
});
</script>
CSS
<style type="text/css">
.content {
display: hidden;
}
</style>
HTML
<h2>My FAQ</h2>
<a class="faqlink" href="#">Link 1</a>
<div class="content">lorem ipsum</div>
<a class="faqlink" href="#">Link 2</a>
<div class="content">lorem ipsum</div>
<a class="faqlink" href="#">Link 3</a>
<div class="content">lorem ipsum</div>
Well, have the answers in a div
container each below the question.
The divs will have display:hidden
attribute by default.
Upon clicking on the links, this CSS style will be removed with JavaScript.
Something like this with Query (needs testing for typos etc.):
$(function()
{ $("a[name='Question1']").click(function()
{ $("div[name='Answer1']").removeClass("answer-hidden"); }); });