JSFiddle - React, Tailwind, and code Playground

HTML

<div>Initial</div>
<a id=a1 href=#>Link 1</a>
<a id=a2 href=#>Link 2</a>
<a id=a3 href=#>Link 3</a>

JavaScript

function showIt(message) {
    //the old code here didnt update 'display', and treated the text as a node.
    $('div').text(message)
        .stop()
        .show()
        .css('opacity', '1');
}

$('#a1').click(function() {
    showIt('Foo!');
    return false;
});

$('#a2').click(function() {
    showIt('Bar!');
    return false;
});

$('#a3').click(function() {
    $('div').fadeOut(1000, function(){
        //this function isnt run until fadeOut is finished
        showIt('Quux...');
    });
    return false;
});