Change Display List vs. Boxes

by Joe Saad

HTML

<div id="changeDisplay">
<a href="javascript:void(0);" id="box">Box</a>
<a href="javascript:void(0);" id="list">List</a>
</div>
<div class="cont">Suspendisse convallis, neque eu suscipit varius, est leo accumsan felis, sit amet congue turpis nulla sed lorem. Nunc molestie fringilla erat in eleifend. Suspendisse laoreet massa ac magna vestibulum vitae volutpat tortor consequat! Ut quam erat, tempor eu commodo vel, vehicula vel ante. Nunc ornare nisi vitae nibh ultricies elementum. Pellentesque ut nisi vitae enim vehicula tempus a vitae justo. Nam tempus commodo massa</div>
<div class="cont">Suspendisse convallis, neque eu suscipit varius, est leo accumsan felis, sit amet congue turpis nulla sed lorem. Nunc molestie fringilla erat in eleifend. Suspendisse laoreet massa ac magna vestibulum vitae volutpat tortor consequat! Ut quam erat, tempor eu commodo vel, vehicula vel ante. Nunc ornare nisi vitae nibh ultricies elementum. Pellentesque ut nisi vitae enim vehicula tempus a vitae justo. Nam tempus commodo massa</div>
<div class="cont">Suspendisse convallis, neque eu suscipit varius, est leo accumsan felis, sit amet congue turpis nulla sed lorem. Nunc molestie fringilla erat in eleifend. Suspendisse laoreet massa ac magna vestibulum vitae volutpat tortor consequat! Ut quam erat, tempor eu commodo vel, vehicula vel ante. Nunc ornare nisi vitae nibh ultricies elementum. Pellentesque ut nisi vitae enim vehicula tempus a vitae justo. Nam tempus commodo massa</div>
<div class="cont">Suspendisse convallis, neque eu suscipit varius, est leo accumsan felis, sit amet congue turpis nulla sed lorem. Nunc molestie fringilla erat in eleifend. Suspendisse laoreet massa ac magna vestibulum vitae volutpat tortor consequat! Ut quam erat, tempor eu commodo vel, vehicula vel ante. Nunc ornare nisi vitae nibh ultricies elementum. Pellentesque ut nisi vitae enim vehicula tempus a vitae justo. Nam tempus commodo massa</div>
<div class="cont">Suspendisse convallis, neque eu suscipit...

CSS

.cont {border:1px solid red; width:28%; float:left; margin:5px; background-color:#FBF9EA; padding:10px 5px; font-size:11px; font-family:arial;}

JavaScript

$("#list").click(function(){
    $('div.cont').animate({
        float: 'none',
        width: '90%'       
    }, 1000,'linear');
});

$("#box").click(function(){
    $('div.cont').animate({
        float: 'left',
        width: '28%'       
    });
});