dynamic tab using php

Question

Hi everyone I'm niubbie in php.I have a problem with tab. I would like the tabs on their click to show a different topic. All this using php and calling the db.

My DB:

giorno	pranzo	cena
lunedi	12:00	20:00
martedi	12:00	20:00
mercoledi	12:00	20:00
giovedi	12:00	20:00
venerdi	12:00	20:00

Days are represented by tabs and when I click on a different day I want it to show lunch and dinner of that particular day.

My code:

 <section class="big-section bg-light-gray border-top border-color-medium-gray wow animate__fadeIn">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12 text-center margin-six-bottom">
                    <h6 class="alt-font text-extra-dark-gray font-weight-500">Orari</h6>
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-12 col-lg-10 tab-style-05">
                    <div class="tab-box">
                   
                        <!-- start tab navigation -->
                        <ul class="nav nav-tabs margin-7-rem-bottom md-margin-5-rem-bottom xs-margin-15px-lr align-items-center justify-content-center font-weight-500 text-uppercase">
                        <?php 
                                $sql = "SELECT * FROM orari_ristorante ";
                                $risultato = mysql_query($sql) or die(mysql_error()."<br>Impossibile eseguire l'interrogazione");
                                $i=0;
                                while ($riga = mysql_fetch_assoc($risultato)){  
                        ?>
                        <?php if($i == 0){?>

                        <li class="nav-item alt-font"><a class="nav-link active" href="#tab-nine1" data-toggle="tab"><?php echo $riga['giorno'];?></a></li>
                        <?php }else{?>  
                        <li class="nav-item alt-font"><a class="nav-link" href="#tab-nine1" data-toggle="tab"><?php echo $riga['giorno'];?></a></li>

                        <?php }
                            $i++;
                            }?>    
                        </ul>
                        <!-- end tab navigation -->
                    </div>
                    <div class="tab-content">
                        <!-- start tab content -->
                        <div class="tab-pane med-text fade in active show" id="tab-nine1">
                            <div class="panel-group accordion-event accordion-style-04" id="accordion1" data-active-icon="icon-feather-minus" data-inactive-icon="icon-feather-plus">
                                <!-- start accordion item -->
                               
                                
                                <div class="panel border-color-black-transparent">
                                    <div class="panel-heading">
                               
                                <?php 

                                    $sql = "SELECT pranzo,cena FROM orari_ristorante LIMIT 1";
                                    $risultato = mysql_query($sql) or die(mysql_error()."<br>Impossibile eseguire l'interrogazione");
                                    
                                    while ($riga = mysql_fetch_assoc($risultato)){ 
                                    ?>
                                        <span class="panel-time">Pranzo</span>
                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
                                            <div class="panel-title">
                                                <span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['pranzo'] ;?></span>
                                                
                                            </div>
                                            
                                        </a>
                                        <a href="#" class="btn btn-very-small btn-golden btn-round-edge-small section-link"><span class='prenota'>PRENOTA</span></a>

                                        <span class="panel-time">Cena</span>
                                        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
                                            <div class="panel-title">
                                                <span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['cena'] ;?></span>
                                                
                                            </div>
                                            
                                        </a>
                                        
                                        <a href="#" class="btn btn-very-small btn-golden btn-round-edge-small section-link"><span class='prenota'>PRENOTA</span></a>
                                        <?php 
                                        }
                                        
                                    ?>  
                                
                                    </div>
                                    
                                </div>
                                 
                                
                            </div>
                            
                        </div>
                        <!-- end tab content -->
                    </div>
                </div>       
            </div>
        </div>
    </section>

My problem is that each tab shows all the rows and not the specific one for that day

My Problem

What is your question? What doesn't work? Do you get any errors? — brombeer, May 25 '22 at 14:08
Please read [Why shouldn't I use mysql_* functions in PHP?](https://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php?noredirect=1&lq=1) — brombeer, May 25 '22 at 14:09
Hi sorry if I was not clear unfortunately my English is not very good. I would like my tabs to work like this Monday Lunch:12:00 Dinner:12:00 Tuesday another line Instead currently the days shown all the times of all the days in the db, as in the picture I attached above. I hope I have made myself clear. And I apologize so much for my English — Raffaele Massa, May 25 '22 at 14:25

score 0 · Answer 1 · answered May 25 '22 at 15:18

You need to ensure you are using unique ID's for your contents and using them in your href of the tab.

Reading your code it looks like each tab is created with the same ID <li class="nav-item alt-font"><a class="nav-link active" href="#tab-nine1" data-toggle="tab"><?php echo $riga['giorno'];?></a></li>

I would echo out the unique id from the database eg.

href="#tab-<?echo $riga['id'];?>" (or whatever your unique column header is)

Ensure you also echo this out further down when the tab content is being created.

hello thank you for your reply, i tried to give a unique id and i notice that the tabs change by id, the problem that the content of the tab remains the same for all tabs, i still wrong something — Raffaele Massa, May 26 '22 at 14:00

score 0 · Answer 2 · edited Jun 10 '22 at 12:47

Based on what you are trying to accomplish, if you limit your results to one, you will always only show the first day in the db. Here's how I would change your second while loop.

<?php
$sql = "SELECT * FROM orari_ristorante";
$risultato = mysqli_query($conn, $sql);
$i = 0;
while ($riga = mysqli_fetch_assoc($risultato)){
  if($i == 0){
    $css = ""
  }else{
    $css = "display:none"
  }
?>
  <div class="giorno_tab <?php echo $riga['giorno'] ;?>" style="<?php echo $css ;?>">; 
    <span class="panel-time">Pranzo</span>
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
        <div class="panel-title">
            <span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['pranzo'] ;?></span>

        </div>

    </a>
    <a href="#" class="btn btn-very-small btn-golden btn-round-edge-small section-link"><span class='prenota'>PRENOTA</span></a>

    <span class="panel-time">Cena</span>
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
        <div class="panel-title">
            <span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['cena'] ;?></span>

        </div>

    </a>

    <a href="#" class="btn btn-very-small btn-golden btn-round-edge-small section-link"><span class='prenota'>PRENOTA</span></a>
  </div>
    <?php

    $i++;}

?>

</div>

It is not the solution, however you can build on top of that to accomplish what you are trying to do. Hopefully that somewhat helps.

Just to explain, I was adding $riga["giorno"] as an kind of ID in the class, however Revbo's answer would give a clearer code when it comes to an ID

dynamic tab using php

2 Answers2