JSFiddle - React, Tailwind, and code Playground
by FlameTrap
HTML
<a class="clickMe" toggle="1">Text 1</a>
<div id="1" class="text"></div>
<div id="2" class="text"></div>
<div id="3" class="text"></div>
<div id="4" class="text"></div><br>
<a class="clickMe" toggle="2">Text 2</a><br>
<a class="clickMe" toggle="3">Text 3</a><br>
<a class="clickMe" toggle="4">Text 4</a><br>
CSS
div, a {
display: inline-block;
float: left;
}
JavaScript
$('a.clickMe').click(function () {
id = $(this).attr('toggle');
$('.text').not('#' + id).text('');
if(id == '1'){
text = '- This text will be toggled';
}
if(id == '2'){
text = '- This text will be toggled 2';
}
if(id == '3'){
text = '- This is the 3rd text';
}
if(id == '4'){
text = '- Lorem Ipsum...';
}
$('#' + id).text(text);
});