how can i dynamically generate different bootstrap tabs with php

I want to generate different bootstrap nav-tabs for each post and the tab list will be vary, basically based on some condition. Some post it may 3 tabs, some post it may 2 but at least 1 tab should be there. Like the following image

The problem i face for each an every post 1st tab class should be .active – which i cant maintain for the rest of the tabs for the same post. Next Tab id for each post and different tab content does not sync properly. it gets duplicated. Also note query is perfect. Just logic problem

Here is the code structure:

 <ul class="nav nav-tabs">
    <?php  
        $qu= "sql query for generating all tabs with some condition";
        $rr=mysqli_query($conn,$qu);
        while($tab1 =mysqli_fetch_array($rr)){ 
    ?>
       <li class=""><a data-toggle="tab" href="#<?php echo $tab1['field_name']; ?>"><?php echo $tab1['field_name'];?></a></li>
           // class active problem
    <?php } ?>  
    
  </ul>

  <div class="tab-content">
      <?php 
        $qu= "sql query for generating all tabs with some condition"; //again i run same query of above
        $rr=mysqli_query($conn,$qu);
        while($tab1 =mysqli_fetch_array($rr)) { 
      ?>
      <div id="<?php echo $tab1['field_name']; " class="tab-pane fade in active">  //here also fade in active
         <table> 
           <thead
            <tr> all rows </tr>
          </thead
           <?php  
                $qu1= "sql query for generating result";
                $resout = mysqli_query($conn, $qu1);
                if(mysqli_num_rows($resout) > 0){  
                while($row2 =mysqli_fetch_array($resout)){
           ?>
          <tbody
            <tr> <td><?php echo $row2['field_name'];?></td>  </tr>
          </tbody>
             <?php 
                } 
                   }
                else {
                       echo 'No result Found';
                   } 
             ?>
         </table>

       </div>
    </div>
     <?php } ?> <!-- End of the While Loop -->
 </div>

Please tell me how can i solve this logic so that for every post all tabs should come properly also first tab with .active class. If the problem is not understandable clearly then please comment. I would change the line. Because i need this help.

Answer

You can try this way

<?php $tab_array = array(array( 'name' => 'Section A' , 'html' => 'HTML DATA OF Section A' ) , array( 'name' => 'Section B' ,  'html' => 'HTML DATA OF Section B' )); ?>

<ul class="nav nav-tabs">
    <?php foreach($tab_array as $key => $tab){  ?>
        <?php if($key==0){ ?>
            <li class="active"><a data-toggle="tab" href="#section<?php echo $key; ?>"><?php echo $tab['name']; ?></a></li>
        <?php }else{ ?>
             <li><a data-toggle="tab" href="#sectionB<?php echo $key; ?>"><?php echo $tab['name']; ?></a></li>
        <?php } ?>
    <?php } ?>
</ul>


<div class="tab-content">

    <?php foreach($tab_array as $key => $tab){  ?>
        <?php if($key==0){ ?>
            <div id="section<?php echo $key; ?>" class="tab-pane fade in active">
                <?php echo $tab['html']; ?>
            </div>
        <?php }else{ ?>
             <div id="section<?php echo $key; ?>" class="tab-pane fade in">
                <?php echo $tab['html']; ?>
            </div>
        <?php } ?>
    <?php } ?>     


 </div>

Advertisement

Answer