JSFiddle - React, Tailwind, and code Playground

by pertrai1

HTML

<div data-role="dialog" id="dialog">
    <div data-role="header" data-theme="d">
        	<h1>Dialog</h1>

    </div>
    <div data-role="content" id="page1">
        	<h3>Page 1</h3>

        <p>Text in Page 1</p>
        <div class="ui-grid-a">
            <div class="ui-block-a"> <a href="#" data-role="button" data-theme="b" class="prev">Previous</a>

            </div>
            <div class="ui-block-b"> <a href="#" data-role="button" data-theme="e" class="next">Next</a>

            </div>
        </div>
    </div>
    <div data-role="content" id="page2">
        	<h3>page 2</h3>

        <p>this is page two</p>
        <div class="ui-grid-a">
            <div class="ui-block-a"> <a href="#" data-role="button" data-theme="b" class="prev">Previous</a>

            </div>
            <div class="ui-block-b"> <a href="#" data-role="button" data-theme="e" class="next">Next</a>

            </div>
        </div>
    </div>
    <div data-role="content" id="page3">
        	<h3>page 3</h3>

        <p>this is page three</p>
        <div class="ui-grid-a">
            <div class="ui-block-a"> <a href="#" data-role="button" data-theme="b" class="prev">Previous</a>

            </div>
            <div class="ui-block-b"> <a href="#" data-role="button" data-theme="e" class="next">Next</a>

            </div>
        </div>
    </div>
</div>

JavaScript

$('#dialog').find('#page1 a.prev').hide();
$('#page2, #page3').hide();
$('#page1 a.next').on('click', function () {
    $('#page1').hide();
    $('#page2').show();
});
$('#page2 a.next').on('click', function () {
    $('#page1, #page2').hide();
    $('#page3').show();
    $('#dialog').find('#page3 a.next').hide();
});
$('#page2 a.prev').on('click', function () {
    $('#page2').hide();
    $('#page1').show();
});
$('#page3 a.prev').on('click', function () {
    $('#page2, #page3').hide();
    $('#page2').show();
});