JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="" class="active" data-related="main">Main</a></li>
    <li><a href="" data-related="title_1">Title 1</a></li>
    <li><a href="" data-related="title_2">Title 2</a></li>
    <li><a href="" data-related="title_3">Title 3</a></li>
    <li><a href="" data-related="title_4">Title 4</a></li>
</ul>
<div id="main">... Content ...</div>
<div id="title_1">... Contenffffft ...</div>
<div id="title_2">... Coneeeetent ...</div>
<div id="title_3">... Content ...</div>
<div id="title_4">... Content ...</div>

JavaScript

$("div").each(function(){
     $(this).hide();
    if($(this).attr('id') == 'main') {
        $(this).show();
    }
});


$('a').on( "click", function(e) {
    e.preventDefault();
    var id = $(this).attr('data-related'); 
    $("div").each(function(){
        $(this).hide();
        if($(this).attr('id') == id) {
            $(this).show();
        }
    });
});