willmkt
4 months ago

Bootstrap nested tabs not working

Posted 4 months ago by willmkt

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 -->

Please sign in or create an account to participate in this conversation.