JSFiddle - React, Tailwind, and code Playground
by cmd0
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/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<body>
<div data-role="page" id="index-page" class="ui-responsive-panel" data-title="MMT" data-url="index-page" data-theme="a">
<div data-role="header" >
<h6 class='header' style="overflow:visible !important;">Test Page</h6>
<a href="#index_nav-panel" data-icon="bars" class="ui-btn ui-corner-all ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-a ui-alt-icon ui-nodisc-icon ui-btn-icon-notext"></a>
<a href="#popupDialog" data-rel='popup' data-position-to="window" data-transition="pop" data-icon="mail" class="ui-btn ui-corner-all ui-btn-inline ui-icon-mail ui-btn-icon-left ui-btn-a ui-alt-icon ui-nodisc-icon ui-btn-icon-notext">Contact</a>
</div><!-- /header -->
<div data-role="panel" class="jqm-navmenu-panel" data-position-fixed="true" data-display="reveal" id="index_nav-panel">
<ul data-role="listview">
<li><a href="#index-page" data-rel="close">Close Menu</a></li>
<li><a href="#Attorneys-page" data-transition="flip">Blah</a></li>
<li><a href="#Governmental-Law-Regulation-page" data-transition="flip">Foo</a></li>
<li><a href="#Government-Affairs-page" data-transition="flip">Bar</a></li>
<li><a href="#Resource-Links-page" data-transition="flip">Bat</a></li>
</ul>
</div>
<div role="main" class="ui-content"><div class="banner">Banner Image </div>
<p>text</p>
<div style='margin-top:44px;'>
<ul data-role="listview">
<li><a href="#" data-transition="flip">Foo</a></li>
<li><a href="#" data-transition="flip">Bar</a></li>
<li><a href="#" data-transition="flip">Bat</a></li>
<li><a href="#" data-transition="flip">Baz</a></li>
<li><a href="#" data-rel="popup" data-transition="pop" class="ui-icon-mail">Biz </a></li>
</ul> -->
</div>
<div data-role='collapsible' class='ui-nodisc-icon' data-collapsed-icon="home"...CSS
/*css file for mobile website*/
/* set a width for wide screens */
.collapsible {
max-width:900px;
}
/* to center the content on wide screen pc or laptop */
@media only screen and (min-width: 1025px){
.ui-page{
width: 960px !important;
margin: 0 auto !important;
position: relative !important;
/*border-right: 3px rgb(93, 105, 105) outset !important;
border-left: 3px rgb(93, 105, 105) outset !important;*/
}
.ui-footer {
max-width: 960px !important;
margin: 0 auto !important;
}
}
/* kludge class to fix no-wrap bug in jqm for listviews...*/
li > p {
white-space: normal !important;
}
/*set the bg color for popups*/
div.ui-header.ui-bar-inherit { background-color: rgba(245, 245, 245, 0.6);}
/*panel background color*/
div#index_nav-panel{
background-color: rgba(91, 95, 97, 0.1) !important;
}
/*panel stays open on desktops*/
@media (min-width:35em) {
/* wrap on wide viewports once open */
.ui-panel-page-content-open.ui-panel-page-content-position-left {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right {
margin-left: 17em;
}
.ui-panel-page-content-open {
width: auto;
}
/* disable "dismiss" on wide viewports */
.ui-panel-dismiss {
display: none;
}
/* same as the above but for panels with display mode "push" only */
.ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-page-content-display-push {
margin-right: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-page-content-display-push {
margin-left: 17em;
}
.ui-panel-page-content-open.ui-panel-page-content-display-push {
width: auto;
}
.ui-panel-dismiss-display-push {
display: none;
}
div.footer {
text-align: center;
letter-spacing: .2em;
font-size: 1em;
}
}
/* #### target mobile devices with max device width 480px #### */
@media screen and (max-device-width: 480px){
div.footer {
font-size:...JavaScript
$(document).on("pagebeforecreate",function(){
// wrap all the collapsibles (h3 by default) with collapsible-set divs
$( "#index-page div[data-role=collapsible]" ).wrapAll( '<div data-role="collapsible-set" data-collapsed-icon="carat-r" data-expanded-icon="carat-d">' );
});
/*
// this should wrap the h3 and all content below into a collapsible... instead of using the callback function in toMobile.php
$(function () {
$('h3').each(function () {
$(this).nextUntil('h3').add(this).wrapAll('<div data-role="collapsible"></div>');
});
});*/
/* Instantiate the popup on DOMReady, and enhance its contents */
$(function(){
$( "#popupDialog, #popupSocialMedia, #popupPhone" ).enhanceWithin().popup(); //
});