Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Create a Expand/Collapse FAQ Accordion, Collapse other on Click

Create a Expand/Collapse FAQ Accordion, Collapse other on Click

Create a Expand/Collapse FAQ Accordion, Collapse other on Click

Hi There:

I have an Html FAQ Page with Questions and Answers like this I would like to to a collapse and I don't have the css/java code to do it.

☻ What are the fees for parking?
♦ The fees are $20 a day

☻ What are the store hours?
♦ The Store Hours are M-F 10-6 Sat 10-5 Sun 11-2




RE: Create a Expand/Collapse FAQ Accordion, Collapse other on Click


First question would be whether you already use any JavaScript framework. If yes, then see whether it has an accordion widget. For example if you use jQuery, then the jQuery UI' accordion widget would be a handy choice.


RE: Create a Expand/Collapse FAQ Accordion, Collapse other on Click


I'm not really qualified to give you any advice about this on a technical level. There are other people in this forum who can do that better than me. But there is also a usability issue here.

In general, when the FAQ has a large number of questions and/or long and non-trivial answers, an accordion is a good choice from the user's point of view. It gives them a quick overview of the questions, and it hides the information that they are not interested in.

But if the FAQ has fewer than half a dozen or so questions, and if the answers are mostly just one or two sentences, then I would argue for doing away with the accordion and just presenting the FAQ as a simple static page of text. That would give the user a quicker and simpler way of seeing the required information at a glance, with the minimum of clicking and scrolling.

Of course, I don't know anything about the information you will be presenting in this case. The stuff about parking fees and store hours might be just examples to give us the general idea. But if that is typical of the actual information you will be showing, I would go further and suggest doing away with a FAQ completely, and give a simple set of bullet points instead. Something like this:

Practical information
  • Parking fees: $20 per day.
  • Store hours: M-F 10-6, Sat 10-5 Sun 11-2

  • etc.

    Anyhow, that's my opinion, for what it's worth. Others will disagree.


    Mike Lewis (Edinburgh, Scotland)

    Visual FoxPro articles, tips and downloads

    Red Flag This Post

    Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

    Red Flag Submitted

    Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
    The Tek-Tips staff will check this out and take appropriate action.

    Reply To This Thread

    Posting in the Tek-Tips forums is a member-only feature.

    Click Here to join Tek-Tips and talk with other members! Already a Member? Login

    Close Box

    Join Tek-Tips® Today!

    Join your peers on the Internet's largest technical computer professional community.
    It's easy to join and it's free.

    Here's Why Members Love Tek-Tips Forums:

    Register now while it's still free!

    Already a member? Close this window and log in.

    Join Us             Close