0

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; ?>

1 Answer 1

0

Sure, you can use a counter. Just move your while loop a little higher. Something along these lines:

    <ul class="tabs" data-tabs id="example-tabs">
        <?php
            // counter for ul.tabs
            $i=0;
            $bulletin_types = get_object_taxonomies( 'bulletinboard' );
            foreach( $bulletin_types as $bulletin_type ) :
                    $terms = get_terms( $bulletin_type );
        foreach( $terms as $term ) :
        // increment each one
        $i++; ?>

        <li class="tabs-title
            <?php // only for the first one, add .is-active
            if($i == 1) { echo ' is-active'; } ?>
        "><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() ):
        // move the while up
        while( $bulletins->have_posts() ) : $bulletins->the_post();
        // reset the counter
        $i=0; ?>
        <div class="tabs-panel<?php // again add .is-active only for first
if($i==0) { echo ' is-active'; } ?>" id="panel-<?php echo $term->slug ;?>">
            <ul class="accordion" data-accordion data-allow-all-closed="true">
                <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; ?>

Basically, you set your counter up before whatever loop you're using - like your foreach - and then within the loop, increment it, and that way you can isolate the first item.

1
  • Thank you so much! So this get the tabs to appear correctly, but the <div class="tabs-panel" and <ul class="accordion" are getting looped every time, when they only need to display once per tab (so, 3 times total).
    – timmyg
    Commented Dec 11, 2017 at 15:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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