The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript NEED ADVICE: Would like to design an FAQs page with expanding and collapsing text?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #33904

    I’m wanting to have an FAQs page that has a list of questions that can expand and collapse as the user clicks on the question.

    Nevermind. Just found Accordian on jQueryUI –

    Will try get that working.


    Hey – if you’d like to avoid using the jQueryUI, this functionality isn’t too hard to write yourself. Here’s an implementation I’ve used several times that has seemed to work well…

    // The h2 must be followed by a div - no other divs can be used inside of "accordian"
    $('#accordian h2').click(function(){

    var clicked = $(this);

    if ($(clicked).next().is(':hidden')) {
    $('#program-descriptions h2')
    return false;


    Then the HTML on the page would look like…

    Link #1

    Link #1 content

    Link #2

    Link #2 content

    Link #1

    Link #3 content

    For the CSS, just add in a few properties to get things displaying correctly:

    #accordion h2:hover {
    cursor: pointer;

    #accordion div {
    display: none;

    Obviously you can use whatever method you like, I’ve just found this one to work pretty well for me.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.