JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="https://dl.dropbox.com/s/hxh6teytrjoo222/toggle-icon.png"></script>
<script src="https://dl.dropboxusercontent.com/s/t2ywui846zp58ye/plus_minus_icons.png"></script>
<div data-role="page" id="home">
<div data-role="panel" id="mypanel" data-position="left" data-display="push" data-dismissible="true" data-theme="a" > <!-- panel content goes here -->
<!--label class="testSuiteId">Test Suite</label-->
<a>hi</a>
</div>
<!-- /panel -->
<div data-role="header" data-theme="b">
<img href="#mypanel" border="0" src="https://dl.dropboxusercontent.com/s/hxh6teytrjoo222/toggle-icon.png" style="float:left;display:inline;margin-top:2%" id="panelOpenImge" />
<h1 style="position: relative;left: 40%">Test</h1>
<!--a href="#mypanel" data-icon="" class="ui-btn-right gear"></a-->
</div>
</div>
CSS
#mypanel {
width: 300px;
border: 1px solid #000;
border-right: none;
background: rgba(0,0,0,.5);
margin: -1px 0;
}
.ui-panel{
min-height: 100px !important;
}
JavaScript
$(function () {
$('#panelOpenImge').click(function(){
$( "#mypanel" ).panel( "open" );
})
})