Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hello guys,
I need to create tabs and I have something like that:
<ul class="nav nav-tabs">
@foreach($services as $serv)
@if($serv->type != null)
<li class="{{ $serv->id == 1 ? 'active' : ''}}"><a data-toggle="tab" href="#{{ $serv->id }}">
@if( $serv->type === 'weddings' )
Tab 1
@elseif ( $serv->type === 'organization')
Tab 2
@elseif ( $serv->type === 'service')
Tab 3
@elseif ( $serv->type === 'production')
Tab 4
@elseif ( $serv->type === 'other')
Tab 5
@endif
</a></li>
@endif
@endforeach
</ul>
<div class="tab-content">
@foreach($services as $serv)
@if($serv->type != null)
<div id="{{ $serv->id }}" class="tab-pane fade in {{ $serv->id == 1 ? 'active' : ''}}">
<h3>{{ $serv->title }}</h3>
<p>{!! $serv->description !!}</p>
</div>
@endif
@endforeach
</div>
It works but not to end correct.
I get a result depending on the number of records in the database on the basis of: If the record is of the type e.g. "Tab 1" and I have 5 records having the type "Tab 1", I get 5 tabs called "Tab 1". How to make records of a particular type placed in appropriate tabs instead of creating another??
I need to have 5 tabs: Tab 1, Tab 2, Tab 3, Tab 4, Tab 5 Now I have: Tab 1, Tab 1, Tab 2, Tab 1, Tab 3 - multiple
Thanks for help!
Wouldn't it better if you just did this
<li class="{{ $serv->id == 1 ? 'active' : ''}}">
<a data-toggle="tab" href="#{{ $serv->id }}">
{{ $serv->type }}
</a>
</li>
At this point if you have two services with the same type you get a duplicate tab, like you have right now. To fix this you should already do that in the query process, you don't want all this logic in your view! You should grab all the results you need in the controller and then pass it to the view ;)
are you suggesting me make separate queries for each type one at a time?
So I have now in controller:
$service = Service::where('visible',1)->where('type','service')->orderBy('order', 'asc')->get();
$organization = Service::where('visible',1)->where('type','organization')->orderBy('order', 'asc')->get();
$other = Service::where('visible',1)->where('type','other')->orderBy('order', 'asc')->get();
$production = Service::where('visible',1)->where('type','production')->orderBy('order', 'asc')->get();
$weddings = Service::where('visible',1)->where('type','weddings')->orderBy('order', 'asc')->get();
and what now?
Ok I did it like that:
$service = Service::where('visible',1)->where('type','service')->orderBy('order', 'asc')->get();
$organization = Service::where('visible',1)->where('type','organization')->orderBy('order', 'asc')->get();
$other = Service::where('visible',1)->where('type','other')->orderBy('order', 'asc')->get();
$production = Service::where('visible',1)->where('type','production')->orderBy('order', 'asc')->get();
$weddings = Service::where('visible',1)->where('type','weddings')->orderBy('order', 'asc')->get();
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#weddings">Tab1</a></li>
<li><a data-toggle="tab" href="#organization">Tab2</a></li>
<li><a data-toggle="tab" href="#service">Tab3</a></li>
<li><a data-toggle="tab" href="#production">Tab4</a></li>
<li><a data-toggle="tab" href="#other">Tab5</a></li>
</ul>
<div class="tab-content">
<div id="weddings" class="tab-pane fade in active">
@foreach($weddings as $wedd)
<h3>{{ $wedd->title }}</h3>
<p>{!! $wedd->description !!}</p>
@endforeach
</div>
<div id="organization" class="tab-pane fade in">
@foreach($organization as $org)
<h3>{{ $org->title }}</h3>
<p>{!! $org->description !!}</p>
@endforeach
</div>
<div id="service" class="tab-pane fade in">
@foreach($service as $serv)
<h3>{{ $serv->title }}</h3>
<p>{!! $serv->description !!}</p>
@endforeach
</div>
<div id="production" class="tab-pane fade in">
@foreach($production as $pro)
<h3>{{ $pro->title }}</h3>
<p>{!! $pro->description !!}</p>
@endforeach
</div>
<div id="other" class="tab-pane fade in">
@foreach($other as $oth)
<h3>{{ $oth->title }}</h3>
<p>{!! $oth->description !!}</p>
@endforeach
</div>
</div>
Perfect!
:) thanks
Please or to participate in this conversation.