This is a simple jQuery library to make the accordion effect.
The basic html is as fallows:
<div id="qaAccordion_wrapper">
<div class="qa_item">
<div class="qa_question qa_off">
Your question goes here... / Title
</div>
<div class="qa_answer">
Your answer goes here...
</div>
</div>
</div>
In its default state you must use this exact markup with its classes. It comes with a css file that styles the elements.
To activate the accordion effect just call the accordion function on the wrapper that holds your entire queston-answer blocks like this:
$("#qaAccordion").qaAccordion();
In this example I used the default wrapper.
Of course you can have you own classes that will work with this plugin.
These are the settings that you can modify to make use of your own classes:
$("#qaAccordion").qaAccordion({
question_container: ".qa_question",
answer_container: ".qa_answer",
slide_speed: "fast",
fa_closed: "fa-plus",
fa_opened: "fa-minus",
fa: true,
fa_path: "qaaccordion/font-awesome-4.2.0/css/font-awesome.min.css"
});
fa_closed
and fa_opened
controls the font awesome that you want to display when the block is closed or opened. You can use any font awesome font you want. This library includes the fonts awesome by default.
If you have allready included the font awesome library in your site then you can put:
fa: false
and the font awesome will not be loaded by this plugin.
If you have any other questions please let me know.
Happy coding !