Containers' switch
CSS
.hidden { display: none; visibility: hidden; }
JavaScript
$(document).ready(function() {
var action, active, switchTo;
active = $(".container:visible"); /* Only one container at a time is visible*/
$("#switcher strong").html(active.attr('title'));
$("#switcher a").click(function() {
action = this.id;
if (action == 'next-layout') {
switchTo = active.next(".container");
if (switchTo.length < 1) {
switchTo = $(".container:first");
}
active.hide();
switchTo.fadeIn();
}
if (action == 'previous-layout') {
switchTo = active.prev(".container");
if (switchTo.length < 1) {
switchTo = $(".container:last");
}
active.hide();
switchTo.fadeIn();
}
active = switchTo;
$("#switcher strong").html(active.attr('title'));
});
});