How to create expandable FAQ page in HTML?

StackOverflow https://stackoverflow.com/questions/2403146

  •  18-09-2019
  •  | 
  •  

Question

I'd like to create an FAQ page for my website that lists all of the questions as hyperlinks. When the link is clicked, the answer for that question should expand out beneath it.

The answers need to be hidden by default, and preferably clicking the link toggles the answers' visibility.

Any thoughts?

Edit

I've tried several of the suggestions, but unfortunately it looks like google sites doesn't allow any of that functionality in the html. I can't use scripts, styles, embed, iframe, or anything beside basic text formatting it would appear. Great ideas everyone, but it looks like I'll have to settle for a Table of Contents style FAQ.

Was it helpful?

Solution

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>

OTHER TIPS

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>

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"); }); });

In the HTML you use this pattern:

<div style="parentContainer">
  <div style="titleContainer" onclick="toggleContents(this)">Link to click on</div>
  <div style="contentContainer">Some content here.</div>
</div>

and in the Javascript toggling is simple:

function toggleContents(elm) {
  var contentContainer = elm.parentNode.getElementsByTagName("div")[1];
  contentContainer.style.display = (contentContainer.style.display == 'block') ? 'none' : 'block';
}

You may want to study the code of "Expandable FAQ" - it is available on GitHub: https://github.com/SolidMVC/ExpandableFAQ And it's has that expand-collapse mechanizm avialable at /UI/Templates/Front/FAQsList.php ( https://github.com/SolidMVC/ExpandableFAQ/blob/master/UI/Templates/Front/FAQsList.php )

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top