Geek Answers Handbook

How to create an extensible FAQ page in HTML?

I would like to create a frequently asked questions page for my site, which lists all the questions as hyperlinks. When you click a link, the answer to this question should expand under it.

Answers should be hidden by default, and preferably clicking on the link toggles the visibility of responses.

Any thoughts?

Edit

I tried a few suggestions, but unfortunately it seems that google sites do not allow using this function in html. I cannot use scripts, styles, embedding, iframes or anything other than basic text formatting. Great ideas for everyone, but it looks like I will have to settle for a table of contents FAQ.

+6
html google-sites
source share
4 answers

A 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>
+5
source share

Here's 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>
+8
source share

Ok, get the answers in the div container, each below the question.

By default, div attributes will have a display:hidden attribute.

Clicking on links will remove this CSS style using JavaScript.

Something like this with Query (requires testing for typos, etc.):

 $(function() { $("a[name='Question1']").click(function() { $("div[name='Answer1']").removeClass("answer-hidden"); }); });
+2
source share

In HTML, you use this template:

 <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 transition just:

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

More articles:


All Articles