title: Overlap Collapse/expand content in frameset
body: <p>How can i overlap the collapsed/expanded content display in the frameset ( i dont want top frame details to be shorten) ? I use a 3 framed frameset(top frame,left frame and right frame), and can't make this thing work (script made for overlap the expanded content in top frameset something like z-index logic). Is it possible to make this change? please give some advice. thanks</p>
  
  <h2>frameset page</h2>
  
  <pre><code>&lt;html&gt;
  &lt;FRAMESET rows="18%,*" frameborder="YES"&gt; 
    &lt;frame src="frame_a.htm"&gt;
  &lt;FRAMESET cols="15%,*" frameborder="YES" &gt;
    &lt;frame src="frame_b.htm"&gt;
  &lt;frameset rows="*" frameborder="YES" border="1" framespacing="1" cols="*"&gt;
    &lt;frame src="frame_c.htm"&gt;
  &lt;/frameset&gt;
  &lt;/html&gt;
  </code></pre>
  
  <h2>frame a page</h2>
  
  <pre><code>&lt;HTML&gt;
  
    &lt;HEAD&gt;
  
      &lt;META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script language="JavaScript" src="/home/common/popup/popup.js"&gt;&lt;/script&gt;
      &lt;TITLE&gt;headerFrame.jsp&lt;/TITLE&gt;
    &lt;/HEAD&gt;    
    &lt;BODY&gt;
      &lt;form name="mainfrm" method="post"&gt;
        &lt;table style="background-color:#DDDDDD" border="1" width="100%"&gt;
          &lt;tr&gt;
            &lt;td&gt;
              &lt;a data-toggle="collapse" data-target="#demo"&gt;Simple collapsible &gt;&gt;&lt;/a&gt;
              &lt;div id="demo" class="collapse"&gt;
                &lt;br/&gt;&lt;a href="Javascript:popupWindow( 'https://www.google.com.my/') "&gt;testing content&lt;/a&gt;
                &lt;br/&gt;
                &lt;input type="button" value="readMore"&gt;
              &lt;/div&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
        &lt;table border="1" cellspacing="0" cellpadding="0" height="100%" width="100%"&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
            &lt;td width="15% " align="center"&gt;TOP FRAME&lt;/td&gt;
            &lt;td width="40% " align="left " &gt;TOP FRAME&lt;/td&gt;
            &lt;td width="45% " &gt;TOP FRAME&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/form&gt;
    &lt;/BODY&gt;
  
  &lt;/HTML&gt;
  </code></pre>
  
  <p>Screenshot of current system layout.
  <a href="https://i.stack.imgur.com/g22AH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g22AH.png" alt="enter image description here"></a></p>
  
  <p>But when i click on expand link, all the top frame details will be shorten. how to make the expanded details layout overlap the topframe instead? 
  <a href="https://i.stack.imgur.com/nWJD3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nWJD3.png" alt="enter image description here"></a></p>
  
  <p>expected output:
  <a href="https://i.stack.imgur.com/mYcwf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mYcwf.png" alt="enter image description here"></a></p>