overlapping tabs on foreach

Question

I need the foreach to work properly : So that we have no doubt here this the normal code:

<!-- Tab v2 -->
    <div class="tabs alternative">
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#sample-2a" data-toggle="tab">Sample Heading 1</a>
            </li>
            <li>
                <a href="#sample-2b" data-toggle="tab">Sample Heading 2</a>
            </li>
            <li>
                <a href="#sample-2c" data-toggle="tab">Sample Heading 3</a>
            </li>
            <li>
                <a href="#sample-2d" data-toggle="tab">Sample Heading 4</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade in active" id="sample-2a">
                <div class="row">
                    <div class="col-md-5">
                        <img src="assets/img/fillers/filler1.jpg" alt="filler image">
                    </div>
                    <div class="col-md-7">
                        <h3 class="no-margin no-padding">Humanitatis Per Seacula</h3>
                        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,
                            qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothicas.</p>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade in" id="sample-2b">
                <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui
                    sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem
                    modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
            </div>
            <div class="tab-pane fade in" id="sample-2c">
                <div class="row">
                    <div class="col-md-5">
                        <img src="assets/img/fillers/filler3.jpg" alt="filler image">
                    </div>
                    <div class="col-md-7">
                        <h3 class="no-margin no-padding">Mirum Est Notare</h3>
                        <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,
                            qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothicas.</p>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade in" id="sample-2d">
                <p>Vivamus imperdiet condimentum diam, eget placerat felis consectetur id. Donec eget orci metus, Vivamus imperdiet condimentum diam, eget placerat felis consectetur id. Donec eget orci metus, ac adipiscing nunc. Pellentesque
                    fermentum, ante ac interdum ullamcorper. Donec eget orci metus, ac adipiscing nunc. Pellentesque fermentum, consectetur id.</p>
                <ul>
                    <li>Donec eget orci metus</li>
                    <li>Ante ac interdum ullamcorper</li>
                    <li>Vivamus imperdiet condimentum</li>
                    <li>Pellentesque fermentum</li>
                </ul>
            </div>
        </div>
    </div>
<!-- End Tab v2 -->

This code generates this effect :

However, when I loop it is overlapping the tabs.

Like I’m doing:

<!-- Tab v2 -->

    <div class="tabs alternative">
        <?php $x=0; foreach($programacao_mes as $value):;?>
        <ul class="nav nav-tabs">

            <li <?php echo ($value->programacao_id == 1) ? "class='active'" : ""   ?>>
                <a href="#sample-<?php echo $x?>" data-toggle="tab"><?php echo $value->programacao_titulo;?></a>
            </li>

        </ul>
        <div class="tab-content">
            <div <?php echo ($value->programacao_id == 1) ? "class='tab-pane fade in active' id='sample-$x' " : "class='tab-pane fade in' " ?> >
                <div class="row">
                    <div class="col-md-5">
                        <img src="assets/img/fillers/filler1.jpg" alt="filler image">
                    </div>
                    <div class="col-md-7">
                        <h3 class="no-margin no-padding"><?php echo $value->programacao_titulo;?></h3>
                        <p><?php echo $value->programacao_post;?></p>
                    </div>
                </div>
            </div>

        </div>
         <?php $x++; endforeach;?>
    </div>

<!-- End Tab v2 -->

That generates this totally wrong effect.

What I’m probably doing wrong?

Answer 1

You should probably be applying the foreach in the wrong place.

Note that the tag <UL> means "unordenate list", i.e., unordered list marking. By placing this tag inside the foreach you are replicating the lists, each with a single item.

The tag <LI> means "list item" and only it should appear inside the foreach, thus creating a single list (UL) with as many items as needed.

Answer 2

If you do it this way, it’ll work:

<!-- Tab v2 -->
<div class="tabs alternative">
    <ul class="nav nav-tabs">
        <li class="active">
            <?php $x=0; foreach($programacao_mes as $value){ ?>
            <a href="#sample-<?php echo $x; ?>" data-toggle="tab">Sample Heading <?php echo $x; ?></a>
            <?php $x++; } ?>
        </li>
    </ul>
    <div class="tab-content">
        <?php $b=0; foreach($programacao_mes as $value){ ?>
        <div class="tab-pane fade in active" id="sample-<?php echo $b; ?>">
            <div class="row">
                <div class="col-md-5">
                    <img src="assets/img/fillers/filler1.jpg" alt="filler image">
                </div>
                <div class="col-md-7">
                    <h3 class="no-margin no-padding">Humanitatis Per Seacula</h3>
                    <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,
                        qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothicas.</p>
                </div>
            </div>
        </div>
        <?php $b++; ?>
    </div>
</div>
<!-- End Tab v2 -->

I put $x, $b, to count how many records are in your foreach(), and then identify where each content should be.

And note that there are two foreach(), the first should bring the categories in which each content is, and the second, their respective contents, based on the selected categories.