Dynamic Bootstrap Tabs In Laravel 6 - laravel

Question

I have two tables , categories and articles.Each category has id and name. Each articles has id, name and category id. Now I want to load the data on each tab when a user click on specific category_id.so related product will be shown on each category tab. I have tried but couldn't get the solution.
Category Model
public function articles()
{
return $this->belongsToMany('App\Article')->withTimestamps();
}
Article Model
public function categories()
{
return $this->belongsToMany('App\Category')->withTimestamps();
}
Controller
public function index(){
$categories = Category::with('articles')->whereIn('id', [1, 2, 3])->get();
return view('welcome',compact( 'categories'));
}
Here is the view :
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
#foreach($categories as $category)
<a class="nav-item nav-link " id="nav-home-tab-{{$category->id}}" data-toggle="tab" href="#nav-home-{{$category->id}}" role="tab" aria-controls="nav-home" aria-selected="true">{{$category->title}}</a>
#endforeach
</div>
</nav>
#foreach($categories as $category)
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home-{{$category->id}}" role="tabpanel" aria-labelledby="nav-home-tab-{{$category->id}}">
<div class="row clearfix">
#foreach($category->articles as $article)
<div class="col-md-3">
<div class="box mt-2 mb-2">
<img src="{{ $article->images ['thumb'] }}">
</div>
</div>
#endforeach
</div>
</div>
</div>
#endforeach

Answer 1

<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
#foreach($categories as $count => $category)
<a id="nav-home-tab-{{$category->id}}" data-toggle="tab" href="#nav-home-{{$category->id}}" role="tab" aria-controls="nav-home" aria-selected="true"
#if($count == 0) class="nav-item nav-link active" #else()class="nav-item nav-link "#endif>{{$category->title}}</a>
#endforeach
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
#foreach($categories as $count => $category)
<div #if($count == 0) class="tab-pane fade show active" #else class="tab-pane fade" #endif id="nav-home-{{$category->id}}"
role="tabpanel" aria-labelledby="nav-home-tab-{{$category->id}}">
<div class="row ">
#foreach($category->articles as $article)
<div class="col-md-3">
<div class="box mt-2 mb-2">
<img src="{{ $article->images ['thumb'] }}">
<h2>قالب بوتسراپ شرکتی</h2>
<p>قالب بوت استراپ شرکتی کاملا فارسی سازی شده و رایگان میتوانید دانلود کنید</p>
<div class=" download-btn">
<i class="fa fa-download"></i> دانلود قالب
<i class="fa fa-laptop"></i> دموی قالب
</div>
</div>
</div>
#endforeach
</div>
</div>
#endforeach
</div>