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

[daddia]

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 – http://jqueryui.com/demos/accordion/

Will try get that working.

[Tim_at_PlattFormAd]

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…

// ACCORDION EFFECT

// 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')

.next()

.slideUp();

$(clicked)

.next()

.slideDown();

}

else

{

$(clicked)

.next()

.slideUp();

}

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.

[Author]

Posts