JSFiddle - React, Tailwind, and code Playground

by pmatseykanets

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

</head>
<body>
    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>Header</h1>
        </div>
        <div data-role="content">    
            <a href="#navmenu" data-rel="popup" data-role="button">Navigate to different section</a>
        </div>

        <div data-role="popup" id="navmenu" style="min-width:210px;">
            <form name="navmenuform" action="showrequest.php" method="post" data-ajax="false">
                <ul data-role="listview" data-inset="true">
                    <li data-role="divider">Navigate to:</li>
                    <li><a href="nav1">Section 1:1</a></li>
                    <li><a href="nav2">Section 1:2</a></li>
                    <li><a href="nav3">Section 1:3</a></li>
                    <li><a href="nav4">Section 1:4</a></li>
                </ul>
                <input id="param" type="hidden" name="" value="">
            </form>
        </div>    
    </div>
<script>
    $(document).on("pageinit", "#page1", function(){
        $("#navmenu ul li a").click(function(e){
            e.preventDefault();
            $("#param").attr("name", $(this).attr("href")).val($(this).text());
            $("form[name=navmenuform]").submit();
        });
    });
</script>
</body>
</html>