3

First off I am well aware that there is a plugin but I am NOT talking about the BS Short code plugin. I am talking about the actual bootstrap accordion. So here is what I am trying to accomplish, I am pretty close I am trying to use custom post types and fields to generate an accordion of questions. So I have a custom post type of "Questions' with a simple title field and a WISYWIG editor for the answer to the question.

So here is my code:

<?php get_header(); ?>

<?php

    $args = array(
        'post_type' => 'question'
    );
    $the_query = new WP_Query( $args );
?>

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

<?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <?php the_title(); ?>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <?php the_field('answer'); ?>
      </div>
    </div>
  </div>

<?php endwhile; else: ?>

    <p>Please fill out some questions.</p>

<?php endif; ?>
<?php wp_reset_postdata(); ?>

</div><!--end of the accordion wrap-->
</div><!-- wrapper-->

<?php get_footer(); ?>

The Problem:

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

The problem is in that piece of code because each accordion has a unique id and when I loop it through the custom loop it displays all my questions fine BUT they all start off not collapsed and open because they all have the same id of collapseOne

How can I generate a unique id for each time WordPress loops through the accordion. (if I said that rite)

See how the accordion loads "Open" because it does not have a unique href, aria-controls and id.

href="#collapseOne"

aria-controls="collapseOne"

id="collapseOne"

enter image description here

1

Never mind I got it. I used <?php the_ID(); ?> to set unique id's but even so that was not the problem. Turns out the first accordion had a class of "in" so the real question was

How can I only give a class to the first post of a loop?

and I did that by using a simple counter. <?php $c = 0; ?> increment it at the end of the loop then give a conditional that echo's "in" if c is = to 1.

Heres the code:

<?php get_header(); ?>

<?php

    $args = array(
        'post_type' => 'question',
        'order'     => 'ASC'
    );
    $the_query = new WP_Query( $args );
?>
<?php $c = 0; ?>

<div class="wrap">

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

<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); $c++; ?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-<?php the_ID(); ?>">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php the_ID(); ?>" aria-expanded="true" aria-controls="collapse-<?php the_ID(); ?>">
          <?php the_title(); ?>
        </a>
      </h4>
    </div>

    <div id="collapse-<?php the_ID(); ?>" class="panel-collapse collapse <?php if( $c == 1 ) echo 'in'; ?>" role="tabpanel" aria-labelledby="heading-<?php the_ID(); ?>">
      <div class="panel-body">
        <?php the_field('answer'); ?>
      </div>
    </div>
  </div>


<?php endwhile; else: ?>

    <p>Please fill out some questions.</p>

<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div><!--end of the accordion wrap-->


</div><!--wrapper-->



<?php get_footer(); ?>
| improve this answer | |
1

You can do this with a built in WordPress query property $the_query->current_post (first post will be 0) without the need to setup a counter:

<?php get_header(); ?>

<?php

    $args = array(
        'post_type' => 'question',
        'order'     => 'ASC'
    );
    $the_query = new WP_Query( $args );
?>
<div class="wrap">

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

<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : ?>
  <?php $the_query->the_post(); ?>

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-<?php the_ID(); ?>">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse-<?php the_ID(); ?>" aria-expanded="true" aria-controls="collapse-<?php the_ID(); ?>">
          <?php the_title(); ?>
        </a>
      </h4>
    </div>

    <div id="collapse-<?php the_ID(); ?>" class="panel-collapse collapse<?php echo ($the_query->current_post == 0 ? ' in' : ''); ?>" role="tabpanel" aria-labelledby="heading-<?php the_ID(); ?>">
      <div class="panel-body">
        <?php the_field('answer'); ?>
      </div>
    </div>
  </div>


<?php endwhile; else: ?>

    <p>Please fill out some questions.</p>

<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div><!--end of the accordion wrap-->


</div><!--wrapper-->



<?php get_footer(); ?>

The relevant bit is <?php echo ($the_query->current_post == 0 ? ' in' : ''); ?>

| improve this answer | |
0

Try The code below. In your code, the collapseOne was repeated throughout the loop. I added $i as counter and set it as id and href link

<?php get_header(); ?>

    <?php

        $args = array(
            'post_type' => 'question'
        );
        $the_query = new WP_Query( $args );
    ?>

    <div class="wrap">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <?php $i=1; ?>
    <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $i; ?>" aria-expanded="true" aria-controls="collapseOne">
              <?php the_title(); ?>
            </a>
          </h4>
        </div>
        <div id="collapse<?php echo $i; ?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-body">
            <?php the_field('answer'); ?>
          </div>
        </div>
      </div>


    <?php $i++; endwhile; else: ?>

        <p>Please fill out some questions.</p>

    <?php endif; ?>
    <?php wp_reset_postdata(); ?>

    </div><!--end of the accordion wrap-->
    </div><!-- wrapper-->

    <?php get_footer(); ?>
| improve this answer | |
  • Didn't work, just gave margins in between accordions. – Lucas Santos Nov 14 '14 at 10:28
  • <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?> this should be <?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?> – Karun Nov 14 '14 at 10:48
  • Yes I have done that, still nothing. They all start open with the same ID. – Lucas Santos Nov 14 '14 at 10:56
  • Thank you for your help! I got it see my answer if you're curious. – Lucas Santos Nov 14 '14 at 11:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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