JQuery: div slide to occupy full page

Question

We have a product page that we are dividing in two. My goal is to make it so that when you click one of the divs it slides to fill the whole page and show the products.

http://jsfiddle.net/Sj575/

HTML

<div>
    <div id="green" class="type1">Exterior products</div>
    <div id="red" class="type2">Interior products</div>    
</div>

CSS

.type1 {
    width:300px;
    background-color:green;
    display:inline-block;
    height:320px;
}
.type2{
    width:300px;
    background-color:red;
    display:inline-block;
    height:320px;   
}

Answer 1

Try this. ;)

http://jsfiddle.net/ph31wyy3/1/

HTML

<div>
    <div id="green" class="green block">eezez</div>
    <div id="red" class="red block">eezez</div>    
</div>

CSS

.green {
    width:400px;
    background-color:green;
    display:block;
    height:320px;
  float: left;
}
.red{
    width:200px;
    background-color:red;
    display:block;
    height:320px;   
  float: left;
}

JS

$(function() {
   $('.block').on('click', function(){
      $('.block').not(this).animate({'width' : '0' }, 500, function() { $(this).hide(); });
      $(this).animate({'width' : '100%'}, 500);
   });
});

Answer 2

with the following jQuery (and some html/css changes), you get this: http://jsfiddle.net/Sj575/274/

$(function() {
 $(".green").click(function() {

    $(".red").toggleClass("hidden");
    $(".green").toggleClass("full")

});

$(".red").click(function() {

    $(".green").toggleClass("hidden");
    $(".red").toggleClass("full")

 });
});

EDIT: Here's another one that slides in instead, http://jsfiddle.net/Sj575/277/