JSFiddle - React, Tailwind, and code Playground

by stot

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div id="home" data-role="page">
    <div data-role="content"> <a data-role="button" href="#mypanel">open panel</a>

    </div>
    <div data-role="panel" id="mypanel" data-display="overlay" data-position="right"> <a id="flipswitch" class="ui-btn ui-btn-inline" href="#">normal</a>

        <ul id="normal" data-role="listview" data-inset="false">
            <li><a href="#">Normal</a>
            </li>
            <li data-role="collapsible" data-inset="false" data-iconpos="right">
                 <h2>Dungeon of Water</h2>

                <ul data-role="listview" data-theme="b">
                    <li><a href="#">test</a>

                    </li>
                    <li><a href="#">test</a>

                    </li>
                    <li><a href="#">test</a>

                    </li>
                </ul>
            </li>
            <li data-role="collapsible" data-inset="false" data-iconpos="right">
                 <h2>Dungeon of Light</h2>

                <ul data-role="listview" data-theme="b">
                    <li><a href="#">test</a>

                    </li>
                    <li><a href="#">test</a>

                    </li>
                    <li><a href="#">test</a>

                    </li>
                </ul>
            </li>
            <li data-role="collapsible" data-inset="false" data-iconpos="right">
                 <h2>Dungeon of Fire</h2>

                <ul data-role="listview" data-theme="b">
                    <li><a href="#">test</a>

                    </li>
                    <li><a href="#">test</a>

                    </li>
                    <li><a href="#">test</a>

                    </li>
                </ul>
            </li>
        </ul>
        <ul...

CSS

/*
https://github.com/jquery/jquery-mobile/issues/5493
https://forum.jquery.com/topic/implementation-of-panel-only-and-content-only-scroll-with-fixed-header
*/
 .ui-li-static.ui-collapsible > .ui-collapsible-heading {
    margin: 0;
}
.ui-li-static.ui-collapsible {
    padding: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading > .ui-btn {
    border-top-width: 0;
}
.ui-li-static.ui-collapsible > .ui-collapsible-heading.ui-collapsible-heading-collapsed > .ui-btn, .ui-li-static.ui-collapsible > .ui-collapsible-content {
    border-bottom-width: 0;
}
body {
    overflow: hidden;
}
.ui-panel {
    top: -1px;
}
.ui-panel .ui-panel-inner, .ui-panel-wrapper .ui-content {
    overflow-y: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 1px;
    -webkit-overflow-scrolling: touch;
}
.ui-panel-dismiss-open, .ui-panel-page-content-open .ui-content {
    overflow-y: hidden;
}
.ui-panel-wrapper {
    height: 100%;
    top: -1px;
    margin-bottom: -2px;
}
.ui-page {
    height: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

switchFav = function () {

    if ($('#normal').is(':visible')) {
        $('#special').show();
        $('#normal').hide();
        $('#flipswitch').text('special');
    } else {
        $('#normal').show();
        $('#special').hide();
        $('#flipswitch').text('normal');
    }

}

$('#flipswitch').on('click', switchFav);