<div data-role="header">
<h1>Header Here</h1>
</div>
<div data-role="content">
<ul data-role="listview" class="ui-listview-outer">
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false" id="my-collaspible">
<h2>Out<asp:Label ID="LabelActualOutHeader" runat="server"></asp:Label></h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li>
<asp:Label ID="LabelMinMaxOut" runat="server"></asp:Label></li>
<li>
<div id="chart1" style="height: 400px; width: 600px;"></div>
</li>
</ul>
</li>
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2>Skur<asp:Label ID="LabelActualSkurHeader" runat="server"></asp:Label></h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li>
<asp:Label ID="LabelMinMaxSkur" runat="server"></asp:Label></li>
</ul>
</li>
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2>Frys<asp:Label ID="LabelActualFrysHeader" runat="server"></asp:Label></h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li>
<asp:Label ID="LabelMinMaxFrys" runat="server"></asp:Label></li>
</ul>
</li>
<li data-role="collapsible" data-iconpos="right" data-shadow="false" data-corners="false">
<h2>SMA<asp:Label ID="LabelActualSMAHeader" runat="server"></asp:Label></h2>
<ul data-role="listview" data-shadow="false" data-inset="true" data-corners="false">
<li>
<asp:Label ID="LabelMinMaxSMA" runat="server"></asp:Label></li>
</ul>
</li>
</ul>
</div>
<div id="chart2" style="height: 400px; width: 600px;"></div>
</div>
<script type="text/javascript">//<![CDATA[
$(document).ready(function ()
{
$('#my-collaspible').collapsible(
{
expand: function () { $.jqplot('chart1', [[3, 7, 9, 1, 5, 3, 8, 2, 5]]); }
}
);
}
);
</script>