JSFiddle - React, Tailwind, and code Playground
HTML
<!--put each <a> inside a div-->
<div id="one"><a class="showSingle" target="1">Div 1</a>
</div>
<div id="two"><a class="showSingle" target="2">Div 2</a>
</div>
<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
CSS
.targetDiv {
display: none
}
JavaScript
jQuery(function () {
jQuery('.showSingle').click(function () {
var index = $(this).parent().index(),
console.log(index);
newTarget = jQuery('.targetDiv').eq(index);
jQuery('.targetDiv').not(newTarget).slideUp('fast')
newTarget.delay('fast').slideToggle('fast')
return false;
})
});