Problem in the logic of a tab system with relationship between tables

Question

Personal I have two tables that relate to each other. Are they:

Category:

public function up()
{
    Schema::create('categories', function (Blueprint $table) {
        $table->increments('id');
        $table->string('name', 128);
        $table->string('slug', 128)->unique();
        $table->mediumText('body')->nullable();
        $table->timestamps();

    });
}

Post:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->increments('id');
        $table->integer('category_id')->unsigned();
        $table->string('title', 128)->nullable();
        $table->string('slug', 128)->unique();
        $table->longText('post_content')->nullable();
        $table->mediumText('short_content')->nullable();

        //RELACIONES
        $table->foreign('category_id')->references('id')->on('categories')
        ->onDelete('cascade')
        $table->timestamps();
    });
}

Model Categoria.

class Category extends Model
{
    protected $guarded = [];

    public function posts() {
        return $this->hasMany('App\Post');
    }
}

Model Post

class Post extends Model
{
    protected $guarded = [];

    public function categories() {

        return $this->belongsTo("App\Category");
    }

}

Controller function that lists data

public function catposts() {

    $posts = Post::with('categories')->get();
    $cats = Categories::with('posts')->get();

    // dd($posts);

    return view('lista_posts', compact('posts','cats'));

}

And the view

                            <div class="TabControl">

                                <div id="header">
                                    <ul class="abas">
                                        @foreach($categories as $category)
                                        <li><div class="aba"><a href="#"><span>{{ $category->name }}</span></a></div></li>
                                        @endforeach   
                                    </ul>
                                </div>

                                <div id="content">

                                    <div class="conteudo">
                                        <div class="row">
                                            @foreach($posts as $post)
                                            <div class="helper">
                                                <h5 class="card-title">{{ $post->title }}</h5>
                                                <p class="card-text">{{ $post->short_content }}</p>
                                            </div>
                                            @endforeach  
                                        </div>    
                                    </div>

                                </div>

                            </div>

The error is not actually a code error, but rather a logic problem. Here’s how this system works. In the example here I have 4 tabs where list 4 categories, when I click on the first tab/category, the system shows the content related to that category and so on. But the problem occurs in the part of the system that shows the content belonging to that tab/category, because for it to work properly this system and tabs, I have to loop inside the content div, so when I click on the first tab/category, it shows the content related to that category, when I click on the second tab/category it shows the content related to that second category and so on, and making the $post forearch within the content div, which would be the correct one, for the system to work, it shows the contents of the other tabs/categories all in the first tab/category, where the contents of the other tabs/category should be shown only when clicked on the tab/category.

So what I need is a logic that works well with this system of tabs, or another system of tabs that works with that logic, if anyone knows of any system please help me, Because I’ve looked on the Internet for a whole system of flaps that works with this logic of relationships and I haven’t found it. I will be very grateful.