HTML Page Layout Change at Runtime

Question

A HTML page contains three frames.

<frameset cols="30%, *">
 <frame src="frame_a.htm">
  <frameset rows="60%, *">
   <frame src="frame_b.htm">
   <frame src="frame_c.htm">
 </frameset>
</framset>

What I need to do is, change that frames layout to two other styles on click event of button. Page contains three buttons, 1) Default Style, 2) Style-2, 3) Style-3

<!-- Style-2 -->
<!--
<frameset cols="*, 30%">
 <frameset rows="60%, *">
  <frame src="frame_b.htm">
  <frame src-"frame_c.htm">
 </frameset>
<frame src="frame_a.htm">
</frameset>
-->
<!-- Style-3 -->
<!--
<frameset cols="30%,35%,35%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>
-->

How can I do this, when page is loaded and user click button 2 or 3 and page changes to style 2 or 3 respectively.

CSS can be a handy option, but I don't want to use CSS here. Guide me in this regard.

Answer 1

jsFiddle Demo

The demo won't allow me to add buttons into the frame so I've added a prompt so you can refresh the page and enter a new value so see a different style.

HTML:

<button id="btn1">Default</button>
<button id="btn2">Style 1</button>
<button id="btn3">Style 2</button>

JS:

$('#btn1').click(function () {
    $('#fset1').attr('cols', '30%, *');
    $("#frame1").appendTo("#fset1");
    $("#frame2").appendTo("#fset2");
    $("#frame3").appendTo("#fset2");
    $('#fset2').appendTo("#fset1");
});
$('#btn2').click(function () {
    $('#fset2').appendTo("#fset1");
    $('#fset1').attr('cols', '*, 30%');
    $("#frame1").appendTo("#fset2");
    $("#frame2").appendTo("#fset2");
    $("#frame3").appendTo("#fset1");
});
$('#btn3').click(function () {
    $('#fset1').attr('cols', '30%,35%,35%');
    $("#frame1").appendTo("#fset1");
    $("#frame2").appendTo("#fset1");
    $("#frame3").appendTo("#fset1");
    $('#fset2').appendTo("#fset1");
});