I have a custom post type (bulletins) that I’m putting into Foundation 6.4.3’s tabs and accordions. The taxonomies are the tab headings. The individual custom post type content is the accordions.
My problem is on page load, no tabs appear. I need to add 'is-active'
class to the first class="tabs-panel"
on the page, but I can’t figure the best way to do that because I have to start and stop the various loops to get the tabs and accordions to work properly.
I don’t think I can use any php counting function because the <div class="tabs-panel">
is before the <?php while
, right?
My code:
<ul class="tabs" data-tabs id="example-tabs">
<?php $bulletin_types = get_object_taxonomies( 'bulletinboard' );
foreach( $bulletin_types as $bulletin_type ) :
$terms = get_terms( $bulletin_type );
foreach( $terms as $term ) : ?>
<li class="tabs-title"><a data-tabs-target="panel-<?php echo $term->slug ;?>" href="#panel-<?php echo $term->slug ;?>"><?php echo $term->name ;?></a></li>
<?php endforeach;?>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<?php foreach( $terms as $term ) : ?>
<?php $bulletins = new WP_Query( array(
'taxonomy' => $bulletin_type,
'term' => $term->slug,
));?>
<?php if( $bulletins->have_posts() ): ?>
<div class="tabs-panel" id="panel-<?php echo $term->slug ;?>">
<ul class="accordion" data-accordion data-allow-all-closed="true">
<?php while( $bulletins->have_posts() ) : $bulletins->the_post();
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title"><?php the_title();?></a>
<div class="accordion-content" data-tab-content >
//POST CONTENT HERE
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
<?php endif;?>
<?php endforeach;?>
</div>
<?php endforeach; ?>