Add class "active" to first item; display first item

• toad78

• April 26, 2016 at 6:12 am

I have content in a repeater:

<ul class="nav nav-tabs tabs-left">
<li>
<a data-toggle="tab" href="#home">GFCI Compatible Single Speed Electric</a>
</li>
<li>
<a data-toggle="tab" href="#profile">Explosion Proof Option</a>
</li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
</ul>

THE CODE I’M USING TO POST:

<?php if( get_field('features_nonlink') || get_field('features') ): ?>
	<div role="tabpanel" class="tab-panels top">

    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#features" aria-controls="features" role="tab" data-toggle="tab">Features</a></li>
        <li role="presentation"><a href="#specifications" aria-controls="specifications" role="tab" data-toggle="tab">Specs</a></li>
           <?php if( get_field('manual') ): ?>
        <li role="presentation"><a href="#manual" aria-controls="manual" role="tab" data-toggle="tab" class="manual">Manual</a></li>
          <?php endif; ?>
    </ul>

    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="features">
			<div class="container">
            <?php if( have_rows('features') ): ?>
			<?php
        
                // vars
            	$c = 0;
        		$class = '';
                $title = get_sub_field('feature-title');
                $description = get_sub_field('feature-description');
				$linkid = get_sub_field('link_id');
			?>
				<div class="col-xs-6 left">
                	<ul class="nav nav-tabs tabs-left">
						<?php while( have_rows('features') ): the_row();
						$c++;
						 if ( $c == 1 ) $class .= 'active'; ?>
                                	
        <li class="<?php echo $class; ?>"><a href="#<?php echo the_sub_field('link_id');?>" data-toggle="tab"><?php the_sub_field('feature-title'); ?></a></li>
                        <?php endwhile; ?>
                    </ul>
               </div>
               <div class="col-xs-6">
               		<div class="tab-content">
 	                       <?php while( have_rows('features') ): the_row();
	   						$c++;
							if ( $c == 1 ) $class .= 'active'; ?>
                            
                        <div id="<?php echo the_sub_field('link_id');?>" class="tab-pane fade in <?php echo $class; ?>"><?php echo the_sub_field('feature-description'); ?></div>
                            <?php endwhile; ?>     
                    </div>
               </div>        
        	<?php endif; ?><!--endif-->

THE PROBLEM:
I’m trying to post a class=”active” to the first li item ONLY:

<li>
<a data-toggle="tab" href="#home">GFCI Compatible Single Speed Electric</a>
</li>

I’m also trying to post class=”active” to the first content item ONLY:
<div id="<?php echo the_sub_field('link_id');?>" class="tab-pane fade in <?php echo $class; ?>"><?php echo the_sub_field('feature-description'); ?></div>

So only the first link item and first content item in relation to that first linked item will display when the web page first loads.

WHAT’S HAPPENING:
All of the <li> in the first set (<li> <a href="#home">GFCI Compatible Single Speed Electric</li>) are getting the class name “active” as well as all of the content items displaying. Plus all of the content is displaying all at once, whereas content should only display when the their respective tab link is clicked.

How it looks:
http://nettra.net/demo-sites/tpt/development/product/ventmaster-375k-cutoff-saw/

How it should look:
http://www.tempest.us.com/product/single-speed-electric/

Where is my code going wrong in the loop?

• James

• April 26, 2016 at 2:19 pm

Hi @toad78

Could you please wrap the <li> code in the code tag? If you don’t wrap it, the page will look broken and it’s hard to understand your explanation.

Regarding your issue, it seems that you didn’t clear the $class variable in each loop and didn’t clear the $c variable at the end of the loop. Please try this code instead:

<div class="col-xs-6 left">
    <ul class="nav nav-tabs tabs-left">
        <?php $i = 0; ?>
        <?php while( have_rows('features') ): the_row(); $i++; ?>
            <li class="<?php if( $i ==1 ){ echo "active"; } ?>"><a href="#<?php echo the_sub_field('link_id');?>" data-toggle="tab"><?php the_sub_field('feature-title'); ?></a></li>
        <?php endwhile; ?>
    </ul>
</div>

<div class="col-xs-6">
    <div class="tab-content">
        <?php $i = 0; ?>
        <?php while( have_rows('features') ): the_row(); $i++; ?>
            <div id="<?php echo the_sub_field('link_id');?>" class="tab-pane fade in <?php if( $i ==1 ){ echo "active"; } ?>"><?php echo the_sub_field('feature-description'); ?></div>
        <?php endwhile; ?>     
    </div>
</div>

I believe this is more of a PHP issue. For further support, please ask the PHP community.

Thanks!

• toad78

• April 27, 2016 at 8:44 am

That worked splendidly!

• anwar

• October 18, 2018 at 8:35 am

Great Works like a Charm..!!!Thanks