FAQ module needs styling

By ricksta on 10 Jun 2010 at 16:32 UTC

I have a list of links from the FAQ module. They are questions and when user clicks on one it reveals the answer below. I like the module though I would like to add a little triangle marker next to each question and so when user clicks the link it reveals the answer and that little triangle changes to a triangle pointing downward instead of horizontally. I can't seem to be able to do this applying css to the classes.

Anyone have a clue as to how I can do this?
R

Comments

You have to use jQuery + CSS

theabacus commented 10 June 2010 at 16:56

You have to use jQuery + CSS in order to do it. If you look at Drupal's built in field sets with their arrows that turn, that should be a help.

In summary, they use jQuery to put a class on the HTML element. That CSS class adds the arrow in the appropriate direction.

FAQ styling

ricksta commented 10 June 2010 at 21:13

I'm using the Acquia Marina theme. I don't think the arrows were there by default. I never saw them. So are you saying that I'll have to hack the .js file to add images?

More specifically: I can add an arrow as bg image on the div class="faq-dt-hide-answer" when the answer is not showing. And I can add an arrow on the div class="faq-qa-visible" when I click a question and the answer is showing. But if I click a question and the answer pops under and click another question then the first one closes up and the answer to the second clicked question is showing, the arrow next to the first question is still pointing downward and I check in Firebug I see that both classes are on the same div.

So I see:

Perhaps if I could change the order of the classes and make the "faq-dt-hide-answer" show last I could have the arrow point sideways and not downward, but I don't know how to go about doing that. Do you?

Where can I get a good look at "Drupal's built in field sets with their arrows that turn" so I can see maybe how to do this

Thanks.