JSFiddle - React, Tailwind, and code Playground

by Rob Hunter

HTML

<a id="overlay1hidelink" class="hidelink" rel="overlay1" href="#">hide blue </a>

<a class="showlink" rel="overlay1" href="#">show blue </a>

<div id="overlay1"></div>
<a id="overlay2hidelink" class="hidelink" rel="overlay2" href="#">hide red </a>

<a class="showlink" rel="overlay2" href="#">show red </a>

<div id="overlay2"></div>

CSS

#overlay1 {
    background-color:blue;
    width: 200px;
    height: 200px;
}
#overlay2 {
    background-color:red;
    width: 200px;
    height: 200px;
}

#overlay1, #overlay1hidelink, #overlay2, #overlay2hidelink
{
    display: none;
}

JavaScript

$('.showlink').click(function () {
    $('#' + $(this).attr('rel')).show();
    $('#' + $(this).attr('rel') + 'hidelink').show();
    
});

$('.hidelink').click(function () {
    $('#' + $(this).attr('rel')).hide();
    $(this).hide();
});