ansaurus

Question

How to create expandable FAQ page in HTML?

Answer 1

+2 A:

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

Developer Art 2010-03-08 17:16:30

Unfortunately, google sites doesn't appear to support styles.

CodeFusionMobile 2010-03-08 17:37:44

Answer 2

+1 A:

try jquery, http://jquery.com, their tutorials may provide your a good kick-start.

Ta Coen 2010-03-08 17:18:20

Answer 3

+1 A:

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>

p2u 2010-03-08 17:21:15

Answer 4

+3 A:

Simple example using jQuery:

CSS

.content {
    display: hidden;
}

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>

Javascript/jQuery

$(document).ready(function(){
    $('.faqlink').click(function(){
        $('.content').hide();
        $(this).next('.content').show();
    });
});

rogeriopvl 2010-03-08 17:23:08

You don't really need the hide() part. You can just do this: $(this).next('.content').toggle(); and have the links toggle from hide and show and the display should be 'none' instead of 'hidden'.

Chris 2010-03-08 19:19:29

Answer 5

A:

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

Robusto 2010-03-08 17:30:03

ansaurus

tags:

views:

answers:

How to create expandable FAQ page in HTML?

related questions