I have nav tabs and this tabs have foreach laravel but tab content not working when click navs

Any javascript code do I write?

<div class="col-sm-12">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        @foreach($state as $item)
        <li role="presentation" class="nav-item ">
            <a class="nav-link {{ $loop->first ? 'active' : ''}} {{ $loop->first ? 'show' : ''}}" data-bs-toggle="tab"
                data-bs-toggle="tab" href="#{{$item->id}}">{{$item->name}}</a>
        </li>
        @endforeach
    </ul>
    <div class="tab-content" id="pills-tabContent">
        @foreach($state as $item)
        @php
        $agent = \App\Models\Agent::where('state_id', $item->id)->get();
        @endphp
        <div id="#{{$item->id}}" class="tab-pane fade {{ $loop->first ? 'active' : ''}} {{ $loop->first ? 'show' : ''}}"
            id="{{ $item->id }}" role="tabpanel">
            @foreach($agent as $items)
            <p>
                {{$items->name}}
            </p>
            @endforeach
        </div>
        @endforeach
    </div>   

I have nav tabs and this tabs have foreach laravel but tab content not working when click navs

Any javascript code do I write?

<div class="col-sm-12">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        @foreach($state as $item)
        <li role="presentation" class="nav-item ">
            <a class="nav-link {{ $loop->first ? 'active' : ''}} {{ $loop->first ? 'show' : ''}}" data-bs-toggle="tab"
                data-bs-toggle="tab" href="#{{$item->id}}">{{$item->name}}</a>
        </li>
        @endforeach
    </ul>
    <div class="tab-content" id="pills-tabContent">
        @foreach($state as $item)
        @php
        $agent = \App\Models\Agent::where('state_id', $item->id)->get();
        @endphp
        <div id="#{{$item->id}}" class="tab-pane fade {{ $loop->first ? 'active' : ''}} {{ $loop->first ? 'show' : ''}}"
            id="{{ $item->id }}" role="tabpanel">
            @foreach($agent as $items)
            <p>
                {{$items->name}}
            </p>
            @endforeach
        </div>
        @endforeach
    </div>   

• laravel
• bootstrap-4

• Can you also show the code that was generated from this template? – Lajos Arpad Commented 2 days ago
• Please clarify what "not working" means? – Ferry To Commented 2 days ago

2 Answers 2

Try this block of code:

<div class="col-sm-12">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        @foreach($state as $item)
        <li role="presentation" class="nav-item">
            <button
                class="nav-link {{ $loop->first ? 'active' : ''}} {{ $loop->first ? 'show' : ''}}"
                data-bs-toggle="tab"
                data-bs-target="#nav-{{ $item->id }}"
                type="button"
                role="tab"
                aria-controls="nav-{{ $item->id }}"
                aria-selected="{{ $loop->first ? 'true' : 'false'}}"
            >{{ $item->name }}</button>
        </li>
        @endforeach
    </ul>
    <div class="tab-content" id="pills-tabContent">
        @foreach($state as $item)
        @php
            $agent = \App\Models\Agent::where('state_id', $item->id)->get();
        @endphp
        <div
            class="tab-pane fade {{ $loop->first ? 'active' : ''}} {{ $loop->first ? 'show' : ''}}"
            id="nav-{{ $item->id }}"
            role="tabpanel"
            aria-labelledby="nav-{{ $item->id }}"
        >
            @foreach($agent as $items)
            <p>
                {{ $items->name }}
            </p>
            @endforeach
        </div>
        @endforeach
    </div>
</div>

• Replaced the <a> tag with the <button> tag.
• Added the data-bs-target attribute
• Updated the tab content div attributes

Documentation: Navs & Tabs

You have a couple of issues in your code:

Issues:

1. Duplicate data-bs-toggle="tab" in the tag

2. Incorrect href="#{{$item->id}}": The id used in the tab content has an extra # (id="#{{$item->id}}"), which is incorrect

3. Use of # in id attributes: In the div inside tab-content, id="#{{$item->id}}" should be id="{{$item->id}}"

Corrected Code:

<div class="col-sm-12">
    <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        @foreach($state as $item)
        <li role="presentation" class="nav-item">
            <a class="nav-link {{ $loop->first ? 'active' : ''}}" 
                data-bs-toggle="tab" href="tab-{{$item->id}}">
                {{$item->name}}
            </a>
        </li>
        @endforeach
    </ul>
    <div class="tab-content" id="pills-tabContent">
        @foreach($state as $item)
        @php
        $agent = \App\Models\Agent::where('state_id', $item->id)->get();
        @endphp
        <div id="tab-{{$item->id}}" 
            class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" 
            role="tabpanel">
            @foreach($agent as $items)
            <p>
                {{$items->name}}
            </p>
            @endforeach
        </div>
        @endforeach
    </div>
</div>

JavaScript (If Needed) If the tabs are still not working, ensure Bootstrap's JavaScript is included and use this jQuery snippet:

$(document).ready(function() {
    var firstTab = $('#pills-tab a:first');
    if (firstTab.length) {
        firstTab.tab('show');
    }
});