JSFiddle - React, Tailwind, and code Playground

by chad

HTML

<div class="container">
    <a class="answer" href="#a">link 1</a>
    <a class="answer" href="#b">link 2</a>
</div>

CSS

a {
    display: block;
    background-color: #cad;
    padding: 10px;
    margin: 10px;
}
a:hover {
    background-color: red;
}

.container {
    height: 200px;
}

JavaScript

// When we click on an answer
$('body').on('click', '.answer', function(){
    // don't follow it's link
    event.preventDefault();
     // fade out the container
    $('.container').fadeOut(function(){
      // remove elements (happens after fadeOut because we are in the callback)
      $('.container').html('');
      // add new elements asynchronously and fade container back in.
      setTimeout( '$(\'.container\').html(\'<a class="answer" href="#c">link 3</a><a class="answer" href="#d">link 4</a>\');$(\'.container\').fadeIn();', 0);
    });
});