How to create expandable FAQ page in HTML?

问题

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.

回答1:

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>

回答2:

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>

回答3:

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

回答4:

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';
}

回答5:

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 )

来源：https://stackoverflow.com/questions/2403146/how-to-create-expandable-faq-page-in-html

标签

html

google-sites