JSFiddle - React, Tailwind, and code Playground

HTML

<div class="onTopOfEachOther">
    <span id='a'>Hello</span>
    <span id='b' style="display: none;">Goodbye</span>
</div>

<br />
<br />

<input type="button" id="btnTest" value="Run Test" />

CSS

.onTopOfEachOther {
    position: relative;
}
.onTopOfEachOther span {
    position: absolute;
    top: 0px;
    left: 0px;
}

JavaScript

$(function() {

    $('#btnTest').click(function() {        
        fadeSwitchElements('a', 'b');    
    }); 
    
    function fadeSwitchElements(id1, id2)
    {
        var element1 = $('#' + id1);
        var element2 = $('#' + id2);
        
        if(element1.is(':visible'))
        {
            element1.fadeToggle(500);
            element2.fadeToggle(500);
        }
        else
        {
             element2.fadeToggle(500, function() {
                element1.fadeToggle(500);
            });   
        }    
    }

});