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

CSS

HTML

My FAQ
 Link 1 
lorem ipsum
 Link 2 
lorem ipsum
 Link 3 
lorem ipsum
 

回答2:

Here a possible approach:

 Is this a question? 
 
 This is an answer. 
   

回答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:

   
Link to click on
   
Some content here.
 
 

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

文章来源: How to create expandable FAQ page in HTML?