//automatic panel_one expand on load. to remove the automatic expand remove the 3 lines bellow.
$(document).ready(function() {
$(“#panel_one”).stop().animate({height:’265px’},400);
});
//first panel
$(“#panel_one”).click(function() {
$(this).animate({height:’265px’},300);
$(“#panel_two”).animate({height:’110px’},300);
$(“#panel_three”).animate({height:’110px’},300);
$(“#panel_four”).animate({height:’110px’},300);
});
//second panel
$(“#panel_two”).click(function() {
$(this).animate({height:’265px’},300);
$(“#panel_one”).animate({height:’110px’},300);
$(“#panel_three”).animate({height:’110px’},300);
$(“#panel_four”).animate({height:’110px’},300);
//fadein when hovering
});
//third panel
$(“#panel_three”).click(function() {
$(this).animate({height:’265px’},300);
$(“#panel_one”).animate({height:’110px’},300);
$(“#panel_two”).animate({height:’110px’},300);
$(“#panel_four”).animate({height:’110px’},300);
//fadein when hovering
});
//fourth panel
$(“#panel_four”).click(function() {
$(this).stop().animate({height:’265px’},300);
$(“#panel_one”).animate({height:’110px’},300);
$(“#panel_two”).animate({height:’110px’},300);
$(“#panel_three”).animate({height:’110px’},300);
//fadein when hovering
});
This is the code for the tiles expand and shrink of this website. http://reallycoolstuff.net/PROJECTS/Unica/
