swapping two DIV elements ? (preview one while other occupies whole page) - EDITED: Swapping DIV and IFRAME

I have a HTML page which contains two DIV elements. I want to arrange these two in a way such that one of them occupies 开发者_如何学运维the whole page and the other one shows up as a small preview box on the top right of the browser. when user clicks on preview, the contents of that DIV is swapped with DIV occupying the page.

The div elements are google widgets. (Annotated timeline, motion chart etc).

EDIT: I am using the method provided by wdm for achieving the above asked question. The issue now is that I have a IFRAME which I want to swap with a DIV element. I put the IFRAME inside the DIV tag as follows

  <div class="b small">
    <iframe src="http://somerandomsite.com" name="framename" id="frameid"> </iframe> 
  </div>

The iframe is Not resizing correctly. I assume its because the CSS formating is not working on the iframe element properly.

Any ideas how I can resize the iframe so that it changes size on click?

Please see the demo and click on the small box. Basically I'm just swapping classes between two div elements via jQuery.

Demo: http://jsfiddle.net/wdm954/dRzaU/1/

EDIT: Demo with images: http://jsfiddle.net/wdm954/dRzaU/4/

jQuery...

$('.small').live('click', function() {
    $('.big').addClass('small').removeClass('big');
    $(this).removeClass('small').addClass('big');
});

HTML...

<div id="wrap">
    <div class="a big"></div>
    <div class="b small"></div>
</div>

CSS (see demo)

You could do this by having four divs - two full size ones and two thumbnails. Your markup could look like this:

<div id="thumb1"> ... </div>
<div id="thumb2"> ... </div>
<div id="fullsize1"> ... </div>
<div id="fullsize2"> ... </div>

And then set up javascript listeners to toggle between the two. If you were using jQuery they could look like this.

$('#thumb1').click(function() {
    $(this).hide();
    $('#thumb2').show();
    $('#fullsize1').show();
    $('#fullsize2').hide();
});

$('#thumb2').click(function() {
    $('#thumb1').show();
    $(this).hide();
    $('#fullsize1').hide();
    $('#fullsize2').show();
});