JSFiddle - React, Tailwind, and code Playground

by paska

HTML

<a id="btn">Click me!</a>
<div id="contenedor"></div>

CSS

#contenedor {
    width: 400px;
    height: 400px;
    border: 1px solid black;
}

JavaScript

var contenedor = jQuery("#contenedor");

contenedor.hide();
jQuery("#btn").on("click", function() {
    if (contenedor.find("#recibidoPorAjax").length == 0) {
        contenedor.append("Loading!");
        contenedor.slideDown();
        setTimeout(function() { //Equivalente a la funcion ajax.
            //html es lo que recibirias del request.
            var html = "<div id=\"recibidoPorAjax\">Hola Mike!</div>";
            contenedor.empty().append(html);
        }, 500);
    }
    else {
        contenedor.slideDown();
    }
});

//Funcion en la que recibis html {
 jQuery("#contenedor").append(jQuery(html).hide()).find("#recibidoPorAjax").slideDown();
//} fin funcion