JSFiddle - React, Tailwind, and code Playground

by Simone Paolucci

HTML

<ul id="tabs">
    <li><a id="link1" href="#">Link 1</a>
    </li>
    <li><a id="link2" href="#">Link 2</a>
    </li>
</ul>
<div id="tabs-container">
    <div id="content1" class="contents">Content for link 1. Should display only when Link 1 is clicked.</div>
    <div id="content2" class="contents">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" class="contents">Additional content for link 1. Should display only when Link 1 is clicked.</div>
    <div id="content2-2" class="contents">Additional content for link 2. Should display only when Link 2 is clicked.</div>
</div>

JavaScript

$( document ).ready(function() {
    // hide tabs
     $('.contents').hide();

    $('#link1').click( function() {
        $('#content1,#content1-2').show();
        return false;
    });
    $('#link2').click( function() {
        $('#content2,#content2-2').show();
        return false;
    });
});