JSFiddle - React, Tailwind, and code Playground

by Rahul Unnni

HTML

<!-- Include the jQuery library -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <!-- Include the jQuery Mobile library -->
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<div data-role="page" id="lessonhomepage">

    <!-- header start-->
    <div data-role="header" data-theme="d" data-tap-toggle="false">
        <a href="#leftpanel" class="ui-btn-right ui-btn ui-icon-md-menu ui-btn-icon-notext"></a>

        <h1 class="header-title">Examples</h1>
    </div>
    <!--header end-->

    <!--content start-->
    <div data-role="content" id="tabscontent">

        <!--horizontal navigation tab start-->
        <div data-role="tabs" id="tabs">
            <div data-role="navbar" id="nav">
                <ul>
                    <li><a class="ui-btn-active" href="#study" data-ajax="false">Study</a></li>
                    <li><a href="#quicktips" data-ajax="false">Quick Tips</a></li>
                    <li><a href="#testresults" data-ajax="false">Test Results</a></li>
                </ul>
            </div>

            <div id="study">
                <ul data-role="listview" data-inset="true">
                    <li><a href="#">Apples</a></li>
                    <li><a href="#">Blueberries</a></li>
                    <li><a href="#">Cherries</a></li>
                    <li><a href="#">Dates</a></li>
                    <li><a href="#">Eggplant</a></li>
                </ul>

            </div>

            <div id="quicktips">
                <ul data-role="listview" data-inset="true">
                    <li><a href="#">Figs</a></li>
                    <li><a href="#">Grapes</a></li>
                    <li><a href="#">Honey Dew melons</a></li>
                    <li><a href="#">Jujubes</a></li>
                    <li><a href="#">Kiwis</a></li>
                </ul>
            </div>

            <div id="testresults">
                <ul data-role="listview"...

JavaScript

var panel = '<div data-theme="a" data-role="panel" data-display="overlay" id="leftpanel"><ul data-role="listview"><li data-icon="false"><a data-ajax="false" href="index.html">Home</a></li><li data-icon="false"><a data-ajax="false" href="html/examples.html">Examples</a></li><li data-icon="false"><a data-ajax="false" href="html/custom/version.html">Version 1.0.1</a></li></ul></div>';

    $(document).on('pagebeforecreate', function () {
        $.mobile.pageContainer.prepend(panel);
    });

    $(document).on('pagecreate', function () {
        $("[data-role=panel]").panel().enhanceWithin();
    });


function changeNavTab(left) {
            var $tabs = $("div[data-role=navbar] li a", $("div[data-role=page].ui-page-active"));
            var curidx = $tabs.closest("a.ui-btn-active").parent().index();
            var nextidx = 0;
            if (left) {
                nextidx = (curidx == $tabs.length - 1) ? 0 : curidx + 1;
            } else {
                nextidx = (curidx == 0) ? $tabs.length - 1 : curidx - 1;
            }
            $tabs.eq(nextidx).click();
        }

        $("div[data-role=content]").on("swipeleft",function (event) {

            changeNavTab(true);
        });

        $("div[data-role=content]").on("swiperight",function (event) {

            changeNavTab(false);
        });




    // Navigation  Drawer Swipe Listener
    $(document).on("swipeleft swiperight", function (e) {

        // save swipe direction right/left
        var dir = 'prev';
        if (e.type == 'swiperight') {
            dir = 'next';
        }
        if (dir == 'prev') {
            $('#leftpanel').panel('close');
            
        } else {
            $('#leftpanel').panel('open');

        }

    });