JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" data-action="toggle" data-id="1">link #1</a><br>
<a href="#" data-action="toggle" data-id="2">link #2</a><br>
<a href="#" data-action="toggle" data-id="3">link #3</a><br>
<a href="#" data-action="toggle" data-id="4">link #4</a><br>
<a href="#" data-action="toggle" data-id="5">link #5</a><br>

<div data-target="toggle" data-id="1"></div>
<div data-target="toggle" data-id="2"></div>
<div data-target="toggle" data-id="3"></div>
<div data-target="toggle" data-id="4"></div>
<div data-target="toggle" data-id="5"></div>

CSS

[data-target="toggle"] {
    display: none;
    position: absolute;
    width:200px;
    height: 200px;
}
[data-target="toggle"].active {
    display: block;
}
[data-target="toggle"][data-id="1"] {
    top: 100px;
    left: 200px;
    background: #69c;
}
[data-target="toggle"][data-id="2"] {
    top: 200px;
    left: 300px;
    background: #cfc;
}
[data-target="toggle"][data-id="3"] {
    top: 200px;
    left: 100px;
    background: #369;
}
[data-target="toggle"][data-id="4"] {
    top: 200px;
    left: 300px;
    background: #d30;
}
[data-target="toggle"][data-id="5"] {
    top: 0;
    left: 500px;
    background: #f60;
}

JavaScript

$(function () {
    var targets = $('[data-target="toggle"]');

    $(document).on('click', '[data-action="toggle"]', function (e) {
        e.preventDefault();

        targets
            .filter('.active').removeClass('active').end()
            .filter('[data-id="' + $(this).data('id') + '"]').addClass('active');
    });
});