0

Is it possible to do a while loop with Accordion from bootstrap ? I am trying to make a FAQ section with the repeater add pro add on from advanced custom fields. All the questions show up but they all pull up the first answer. How can I achieve this?

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

        <?php if(get_field('faq_general_ht')): ?>

                <?php while(has_sub_field('faq_general_ht')): ?>

                      <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="headingTwo">
                          <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true">
                             <p><?php the_sub_field('faq_general_question_ht') ?></p>
                            </a>
                          </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel">
                          <div class="panel-body">
                             <p><?php the_sub_field('faq_general_answer_ht') ?></p>
                          </div>
                        </div>
                      </div>

            <?php endwhile; ?>
        <?php endif; ?>
    </div>
Improve this question
2
  • you're giving them all the same href/ID, collapseOne
    – Milo
    Commented Apr 28, 2015 at 2:46
  • Yes. What do I do instead wince its a while loop?
    – JediTricks007
    Commented Apr 28, 2015 at 2:52

1 Answer 1

Reset to default
2

Try using the count variable to increment the loop.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <?php if(get_field('faq_general_ht')): ?>
           <?php $count=0; ?>
            <?php while(has_sub_field('faq_general_ht')): ?>
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingTwo">
                      <h4 class="panel-title">
                       <?php echo '<a data-toggle="collapse" data-parent="#accordion" href="#collapse' .$count. '"aria-expanded="true">' ?>
                         <p><?php the_sub_field('faq_general_question_ht') ?></p>
                        </a>
                      </h4>
                    </div>
                    <?php echo '<div id="collapse' .$count. '" class="panel-collapse collapse" role="tabpanel">' ?>
                      <div class="panel-body">
                         <p><?php the_sub_field('faq_general_answer_ht') ?></p>
                      </div>
                    </div>
                  </div>
             <?php $count++; ?>
        <?php endwhile; ?>
    <?php endif; ?>
</div>
Improve this answer
1
  • 1
    Thank you so much. I had to put php tags around $count=0; and $count++; to make it work. It works perfect.
    – JediTricks007
    Commented Apr 28, 2015 at 16:31

Not the answer you're looking for? Browse other questions tagged or ask your own question.