I changed your HTML a bit and made your CSS fit the new HTML setup. The only thing to note is the jQuery is set up to where you need to have the .side
a .square
is affecting directly after the .square
. Then I used the following to do the sliding action you're looking for
$('.square').click(function() { // Fire when square is clicked
if(!$(this).hasClass("active")) { // If not fullscreen already
$(".active").removeClass("active"); // Remove other active class(es)
$(this).addClass("active"); // Make this have class active
$('.side').stop().animate({"width":"0%"}); // Shrink the other elements
// Make the nearest side full screen
$(this).nextAll(".side").stop().animate({ "width":"100%"});
} else { // If it's already open, put it back to the default
$(this).removeClass("active");
$(".side").stop().animate({"width":"50%"});
}
});