Add active class to foundation 6 tabs while looping categories

Question

Add active class to foundation 6 tabs while looping categories

timmyg

2022年4月26日 23:00

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

Topic terms loop php custom-taxonomy custom-post-types Wordpress

Category Web

WebElaine · Accepted Answer · 2017年12月8日 16:54

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.

Add active class to foundation 6 tabs while looping categories

About