JSFiddle - React, Tailwind, and code Playground

by MrTest

JavaScript

function AjaxAnimationBeforeDataIsLoaded() {

    $('.submit').click(function() {

        var PanelHeight = $('.data-inner').height();
        $('.data-inner').css('height', PanelHeight + 'px');
        $('.data-inner div[id*="UpdatePanel1"]').hide().fadeOut(300);
        $('.data-inner .loading').show();

    });
}

// Ajax Animation - after data is loaded


function AjaxAnimationAfterDataIsLoaded() {


    (function() {

        if ($('.data-inner .table-data').length > 0) {
            CreateTableData();
        }
        if ($('.data-inner #tabs').length > 0) {

            $("#tabs").tabs();
            $("#tabs").CreateTabs();

        }

    })();

    $('p.message').fadeIn(300);
    $('.data-inner .loading').hide();
    $('.data-inner').css('height', 'auto');
    $('.data-inner div[id*="UpdatePanel1"]').fadeIn(300);

    AjaxAnimationBeforeDataIsLoaded(); // Initiate AjaxAnimationBeforeDataIsLoaded
    $('.new-search').click(function(event) {
        $(this).toggleClass('close-btn');
        $(this).next('div').toggleClass('visible');
        event.preventDefault();
    });

}