Home › Forums › General Issues › Add class "active" to first item; display first item
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?
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!
The topic ‘Add class "active" to first item; display first item’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.