JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script src="http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Verdana,Arial,sans-serif&amp;fwDefault=normal&amp;fsDefault=1.1em&amp;cornerRadius=4px&amp;bgColorHeader=cccccc&amp;bgTextureHeader=03_highlight_soft.png&amp;bgImgOpacityHeader=75&amp;borderColorHeader=aaaaaa&amp;fcHeader="></script>
<div id="tips_dialog">
    <p class="step">
        <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
        Your files have downloaded successfully into the My Downloads folder.
    </p>
    <p class="step">
        Currently using <b>36% of your storage space</b>.
    </p>
</div>

CSS

.hide {
    display: none;        
}

JavaScript

var currentStep = 0;

$('#tips_dialog').dialog({
    //modal:     true,
    autoOpen:  true,
    open:      onShowDialog,
    buttons: {
        "Следующая подсказка": nextStep,
        "Закрыть": function() {
            $( this ).dialog( "close" );
        }
    }
});

function onShowDialog() {
    nextStep();
}

function nextStep() {
    var stepDivs = $('.step', this);
    var stepCount = stepDivs.length;

    stepDivs.addClass('hide');
    if (currentStep < stepCount)
        currentStep++;
    else
        // hide "Next" button!                
console.log(stepCount);
    stepDivs.eq(currentStep).removeClass('hide');
}