Custom Bootstrap accordion for FAQ module

[VickiTuch]

Hi I am trying to set up a  Custom Twitter Bootstrap javascript accordion for FAQ module.

Nearly there, yet only one of the faqs works in that you click on the question and the answer opens, clicking on any other question opens up the same question

I've customed Faq list layout with this code:

<div class="panel panel-default">

<div class="panel-heading">

<h4 class="panel-title">

<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#1">

{tag_question_nolink}                  </a>

</h4>

</div>

<div id="1" class="panel-collapse collapse">

<div class="panel-body">

{tag_answer}

</div>

</div>

</div>

I presume I need to amend the code where it has number 1 as only working for one faq but not sure how?

Any help GREATLY appreciated.

[Liam Dilley]

Your only showing one there but I take it your not setting the target data and target ID uniquely for each item.

[VickiTuch]

Hi Liam, please see the link to help explain, I've added all the faqs via BC, yet only one works, and they all open up to show the same answer.

http://aon-lafarge.businesscatalyst.com/FAQs.html

I am not an expert coder but presume 1 needs to change to something else?

[Liam Dilley]

I will be a bit annoying but I would say - read the boostrap documentation.

This is your key step. You need to read the stuff about FAQ's and how it works, it is all there. Then you will know what you are doing wrong and then you can apply the solution.

[VickiTuch]

Hi thanks for replying, yes definately agree there should be no short cuts, I've had a good read through the docs, tried may things but all in vain so just stuck with coding as normal without the BC FAQ integration, It is obvious the problem is the requirement for each collapse question and answer to have their own assigned unique ID's, yet I cannot seem to work out how to dynamically create a unique ID for each via the FAQ Module Template (list Layout), thats why only one of them worked with my code.

Anyway this works without the FAQ module integration but defeats the object really: http://aon-lafarge.businesscatalyst.com/FAQs.html

I'm frustrated as I managed to set up a custom FAQ accordion for a different site using jQuery UI Accordion control integrating with the FAQ module,but this did not require unique ids to work, please see:

http://www.royalmintmuseum.org.uk/about-us/faqs/index.html

I was hoping to do the same with the Bootstrap collapse/accordian,but defeated this time,  I will however keep trying...

[Adrian.King]

Looks like you fixed it, but in case someone else is looking, this seems to work for me.

Note the use of "#faq_{tag_counter}" for the question href and the answer id.

I also changed the default accordion id to "accordion-faq" which I think would avoid conflict with any other accordions on the page.

In page body ...

        <div class="panel-group" id="accordion-faq" role="tablist" aria-multiselectable="true">

                {module_faq,a}

        </div>

Then in /Layouts/Faq/detail.html ...

<div class="panel panel-default">

    <div class="panel-heading">

        <h4 class="panel-title">

            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-faq" href="#faq_{tag_counter}">

                {tag_question_nolink}

            </a>

        </h4>

    </div>

    <div id="faq_{tag_counter}" class="panel-collapse collapse">

        <div class="panel-body">

            {tag_answer}

        </div>

    </div>

</div>