JSFiddle - React, Tailwind, and code Playground

by Soul_Master

HTML

<div id="divDynamic"></div>
<div class="buttonLine">
    <button id="bttLoadPage1">Load Page 1</button>
</div>

CSS

#divDynamic
{
    display:none;
    padding:10px;
    border: 1px solid #c1c1c1;
    background: #f1f1f1;
    min-height: 100px;
}
.buttonLine
{
    padding:10px;   
}

JavaScript

function HideButton(id)
{
    $('#' + id).fadeOut(500, function()
    {
       alert('hide button load page 1');
    }); 
}

$(function()
{
    $('#bttLoadPage1').click(function()
    {
        $.ajax({
          type: 'POST',
          url: '/echo/html/',
          data: {
              html: unescape('%3Cscript%20type%3D%22text/javascript%22%3EHideButton%28%22bttLoadPage1%22%29%3B%3C/script%3E%20Dynamic%20Content%21'),
              delay: 2
          },
          dataType: 'html',
        success: function(data) {
            $('#divDynamic')
                .css({display: 'block', opacity: 0})
                .html(data)
                .fadeTo(1000, 1.0);
         }
        });
    });
});