JSFiddle - React, Tailwind, and code Playground

by psyon001

HTML

<ul class="sideLinks">
    <li>
        <a href="#favoritesDetail">Favorites</a>
    </li>
    <li>
        <a href="#scopeDetail">Scope</a>
    </li>
    <li>
        <a href="#conciergeDetail">Concierge</a>
    </li>
    <li>
        <a href="#shareDetail">Share</a>
    </li>
    <li>
        <a href="#remindersDetail">Reminders</a>
    </li>
</ul>
<div id="moreInfo">
    <p id="default">Default description...</p>
    <p id="favoritesDetail">Favorites description...</p>
    <p id="scopeDetail">Scope description...</p>
    <p id="conciergeDetail">Concierge description...</p>
    <p id="shareDetail">Share description...</p>
    <p id="remindersDetail">Reminders description...</p>
</div>

CSS

#moreInfo p{display:none;}
#moreInfo p#default{display:block;}

JavaScript

$('.sideLinks').find('a').on('click', function(e){
    e.preventDefault();
    var $moreInfo = $('#moreInfo'),
        id = $(this).attr('href');
    $moreInfo.find('p').hide();
    $moreInfo.find(id).show();
});