Is there a way to modify the expand menu bar so it expands from left to right or right to left, instead of top down? Any assistance would be greatly appreciated.
Existing Expand Menu Bar
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script language="JavaScript" src="/home/common/popup/popup.js"></script>
<TITLE>headerFrame.jsp</TITLE>
</HEAD>
<BODY>
<form name="mainfrm" method="post">
<table width="100%" height="50%" border="1" bordercolor="#000000" cellspacing="0" cellpadding="0">
<div style="position:relative;top:0;left:0;z-index:2;background-color:#F0F0F0;">
<div id="demo" class="collapse in">
<div class="div-table">testing content</div>
<div class="div-table-row">testing content</div>
<div class="div-table-col">testing content</div>
</div>
<a data-toggle="collapse" data-target="#demo" style="margin-left:50%;">
<img src="http://www.oneequallmusick.org/frame/images/uparrow.png" width="25px" height="20px">
</a>
</div>
<tr>
<td width="15% " align="center">TOP FRAME</td>
<td width="40% " align="left ">TOP FRAME</td>
<td width="45% ">TOP FRAME</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Is there a way to modify the expand menu bar so it expands from left to right or right to left, instead of top down? Any assistance would be greatly appreciated.
Expected Result
--
<!-- begin snippet: js hide: false -->Desired Outcome
When collapsed https://i.stack.imgur.com/NrN0Y.png
When expanded https://i.stack.imgur.com/VkYza.png