How to make the first accordion (FAQ) open and the rest closed in wordpress-CodePudding

I have created dynamic FAQ plugin and its working well. But I have an issue of how to make first accordion tab open using bootstrap class show and the rest closed by using WordPress the_ID(); function.

<?php
    $mypost = array( 'post_type' => 'faqs', );
    $loop = new WP_Query( $mypost );
    ?>
   <?php while ( $loop->have_posts() ) : $loop->the_post();?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <div  id="accordionPanelsStayOpenExample">
          <div >
            <h2  id="panelsStayOpen-<?php the_ID(); ?>">
              <button  type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse<?php the_ID(); ?>" aria-expanded="true" aria-controls="panelsStayOpen-collapse<?php the_ID(); ?>">
              <?php the_title(); ?>
              </button>
            </h2>
            <div id="panelsStayOpen-collapse<?php the_ID(); ?>"  aria-labelledby="panelsStayOpen-<?php the_ID(); ?>">
              <div >
                <strong><?php the_content(); ?>
              </div>
            </div>
          </div>
        </div>
        </article>
 
    <?php endwhile; ?>
    </div>
</div>
<?php wp_reset_query(); ?>

so the first tab should always be

 <div id="panelsStayOpen-collapse<?php the_ID(); ?>"  aria-labelledby="panelsStayOpen-<?php the_ID(); ?>">

and the rest

 <div id="panelsStayOpen-collapse<?php the_ID(); ?>"  aria-labelledby="panelsStayOpen-<?php the_ID(); ?>">

CodePudding user response：

One problem is that your <div ...> items need unique IDs, like this:

<div  id="accordionPanelsStayOpenExample-<?php the_ID(); ?>">

But to your main point: to programmatically make the first panel have a class of "collapse show" and subsequent ones have a class of just "collapse", keep track of which one you're up to via a counter (in my case $i) and selectively add "show" on all but the first:

<div id="panelsStayOpen-collapse<?php the_ID(); ?>"  aria-labelledby="panelsStayOpen-<?php the_ID(); ?>">

So your entire code would become:

<?php
    $mypost = array( 'post_type' => 'faqs', );
    $loop = new WP_Query( $mypost );
    $i = 0;
    ?>
   <?php while ( $loop->have_posts() ) : $loop->the_post();?>
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <div  id="accordionPanelsStayOpenExample-<?php the_ID(); ?>">
          <div >
            <h2  id="panelsStayOpen-<?php the_ID(); ?>">
              <button  type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse<?php the_ID(); ?>" aria-expanded="true" aria-controls="panelsStayOpen-collapse<?php the_ID(); ?>">
              <?php the_title(); ?>
              </button>
            </h2>
            <div id="panelsStayOpen-collapse<?php the_ID(); ?>"  aria-labelledby="panelsStayOpen-<?php the_ID(); ?>">
              <div >
                <strong><?php the_content(); ?>
              </div>
            </div>
          </div>
        </div>
        </article>
 
    <?php endwhile; ?>
    </div>
</div>
<?php wp_reset_query(); ?>