JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<a class="showSingle" target="1">Div </a>

<a class="showSingle" target="2">Div 2</a>

<a class="showSingle" target="3">Div 3</a>

<a class="showSingle" target="4">Div 4</a>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

CSS

.targetDiv {
    display: none
}

JavaScript

jQuery(function () {
    jQuery('.showSingle').click(function () {
        var index = $(this).index(),
            newTarget = jQuery('.targetDiv').eq(index).slideDown();
        jQuery('.targetDiv').not(newTarget).slideUp();

    });
});