Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

willmkt's avatar

Bootstrap nested tabs not working

I´m having trouble with dynamic tabs, php code works fine. The problem is with bootstrap tabs.



<!-- objectives -->

<ul class="nav nav-tabs nav-justified tabprofile" id="outerTab" role="tablist">
    @foreach($parentCategories as $count => $category)
        <li class="nav-item">
            <a
            @if($count == 0) class="nav-link fade show active " @else class="nav-link checklist" @endif

             id="{{$category->id}}-tab" data-toggle="tab" href="#{{$category->id}}"
                role="tab" aria-controls="{{$category->id}}" @if($count == 0) aria-selected="true" @else aria-selected="false" @endif>{{$category->name}}</a>
        </li>
    @endforeach
</ul>
<!-- level titles -->

<div class="tab-content">
    @foreach($parentCategories as  $count => $category)
        <div @if($count == 0) class="tab-pane fade show active" @else class="tab-pane checklist" @endif id="{{$category->id}}" role="tabpanel" aria-labelledby="{{$category->id}}-tab" >

            <ul class="nav nav-tabs nav-justified" id="innerTab" role="tablist">
                @foreach($category->children as $count => $sub)
                    <li class="nav-item">
                        <a class="nav-link  @if($count == 0) show active @endif" id="{{$sub->id}}-tab" data-toggle="tab" href="#{{$sub->id}}"
                            role="tab" aria-controls="{{$sub->id}}" @if($count == 0) aria-selected="true" @else aria-selected="false" @endif>{{$sub->slug}}</a>
                    </li>
                @endforeach
            </ul>
            <div class="tab-content">
                @foreach($category->children as $count => $sub)
                    <div @if($count == 0) class="tab-pane fade show active checklist" @else class="tab-pane checklist" @endif id="{{$sub->id}}" role="tabpanel" aria-labelledby="{{$sub->id}}-tab" >

                        <table class="table table-bordered">
                            <tbody>
                            @foreach($checklist->objectives->where('category_id', $sub->id) as $objective)
                                <tr>
                                    <th>
                                        {{$objective->competence}} - {{$objective->title}}
                                    </th>
                                    <td>
                                    @switch($objective->pivot->status)

                                        @case('Consistente')
                                        <span class="badge badge-success">{{$objective->pivot->status}}</span>
                                        @break

                                        @case('Difícil de obter')
                                            <span class="badge badge-danger">{{$objective->pivot->status}}</span>
                                        @break

                                        @case('Mais ou Menos')
                                            <span class="badge badge-warning">{{$objective->pivot->status}}</span>
                                        @break

                                        @default
                                        <span class="badge badge-secondary">{{$objective->pivot->status}}</span>                                                            		 
                                        @break

                                    @endswitch

                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div><!-- level content -->
                @endforeach
            </div><!-- tab-content -->
        </div><!-- level content -->
    @endforeach
</div><!-- tab-content -->

0 likes
4 replies
ajithlal's avatar

Tab id should be unique across the tabs. Cross check the ids of the tabs. If the ids are same for nested tabs then make it unique.

willmkt's avatar

I have already tried that, my problem is the tab navigation works fine but the tab content does not change!

ajithlal's avatar

make sure that tab navigation works fine by adding some unique text in each tab content and check you are getting value in your inner tab.

sauravs012's avatar

class or id attribute not started with an integer, as you write in the code id="{{$sub->id}}-tab" and others

change it to id="tab-{{$sub->id}}" and all others like this

Please or to participate in this conversation.