JSFiddle - React, Tailwind, and code Playground

by Erik Zanker

HTML

<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>';

$(function () {
    $("body").prepend(panel);
    $("[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
$("div[data-role=header]").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');

    }
});