JSFiddle - React, Tailwind, and code Playground

by Manoj kumar Lakshman

HTML

<ul id="tabs">
    <li><a href="#">Link 1</a>

    </li>
    <li><a href="#">Link 2</a>

    </li>
</ul>
<div id="tabs-container">
    <div id="content1">Content for link 1. Should display only when Link 1 is clicked.</div>
    <div id="content2">Content for link 2. Should display only when Link 2 is clicked.</div>
</div>
<p>Unrelated text is here. Text in this area is static and should display at all times.</p>
<div id="tabs-container-2">
    <div id="content1-2">Additional content for link 1. Should display only when Link 1 is clicked.</div>
    <div id="content2-2">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>

JavaScript

$(function () {
    $('#tabs-container div').hide();
    $('#tabs-container-2 div').hide();
    $('#tabs li a').on('click', function (event) {
        event.preventDefault();
        num = $(this).parent().index();
        $('#tabs-container div').eq(num).slideToggle();
        $('#tabs-container-2 div').eq(num).slideToggle();
    });
});