Add unique css class to first iteration of foreach php loop

Question

Beginner's question. I have a working foreach loop using bootstrap for styling and tab navigation. I need to declare the class of ONLY the first tab (iteration) as "active" as in class="nav-item active".

<ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
    <?php foreach($content['tabs'] as $tab){ echo 
       '<li class="nav-item" role="presentation">
           <button class="nav-link" id="pills-'.$tab["label"].'-tab" 
           data-bs-toggle="pill" data-bs-target="#pills-'.$tab["label"].'" 
           type="button" role="tab" aria-controls="pills-'.$tab["label"].'" 
            aria-selected="true">
           <h2 class="h4">'.$tab["label"].'</h2>
           </button>
        </li>';
     } ?>
</ul>

Ryan · Accepted Answer · 2022-07-23 23:28:51Z

2

You can set a variable to have a value of 1 and increment it with each iteration of the foreach loop. Once you have that you can check if the current iteration is equal to 1.

<ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
<?php $i = 1; foreach($content['tabs'] as $tab){ echo 
   '<li class="nav-item ' . ($i == 1 ? "active" : "") . '" role="presentation">
       <button class="nav-link" id="pills-'.$tab["label"].'-tab" 
       data-bs-toggle="pill" data-bs-target="#pills-'.$tab["label"].'" 
       type="button" role="tab" aria-controls="pills-'.$tab["label"].'" 
        aria-selected="true">
       <h2 class="h4">'.$tab["label"].'</h2>
       </button>
    </li>';
$i++; 
} ?>

answered Jul 23, 2022 at 23:28

Ryan

1,3382 gold badges10 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Moshe Gross Over a year ago

Or just replace $i++ with $i=0

Collectives™ on Stack Overflow

Add unique css class to first iteration of foreach php loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related