JSFiddle - React, Tailwind, and code Playground

by JAAulde

HTML

<div id="1" class="clickable">One</div>
<div id="2" class="clickable">Two</div>
<div id="3" class="clickable">Three</div>

<div id="d1" class="showhide">One</div>
<div id="d2" class="showhide">Two</div>
<div id="d3" class="showhide">Three</div>

CSS

.clickable {
    border: 1px solid #0f0;
}

.showhide {
    border: 1px solid #00f;
}

JavaScript

$( function()
{
    var divs = $( 'div.showhide' ),
        hideAllBut = function( idSuffix )
        {
            divs
                .hide()
                .filter( '#d' + idSuffix )
                    .show();
        };

    $( '.clickable' ).click( function()
    {
        hideAllBut( $( this ).attr( 'id' ) );
    } );

    hideAllBut( $( '.today' ).attr( 'id' ) );
} );