Кнопки. Скрытые блоки

[CatinTheBread]

Всем джамбо. Есть страничка с кнопками...http://osobniak.com/дизайн-интерьеров
Кнопки стоят вертикально и контент открывается соответственно блоком под каждой кнопкой. Хотелось бы сделать все по симпатичнее. Например кнопки горизонтально, и при нажатии открывался блок с контентом на всю ширину страницы или кнопки вертикально с лева, а контент открывался с права...

Или может кто знает как это сделать вообще не прибегая к использованию кнопок?!?

Если есть идеи буду признателен! Вот код кнопок.

<!-- Lightbox Plus ColorBox v2.6/1.3.32 - 2013.01.24 - Message: 0--><script type="text/javascript">
function onclick(event) {
console.log("text1");
var txt = event.target.innerText;
if (txt == "Современные интерьеры")
{
jQuery("#ToggleRestavration").slideToggle("slow");
}
else if (txt == "Классические интерьеры")
{
jQuery("#ToggleBaton").slideToggle("slow");
}
else if (txt == "Интерьеры для офиса")
{
jQuery("#ToggleElseBaton").slideToggle("slow");
}
else if (txt == "Интерьеры для ресторана")
{
jQuery("#TogglePestapan").slideToggle("slow");
}
};
jQuery(document).ready(function($){
$("a[rel*=lightbox]").colorbox({speed:0,width:false,height:false,innerWidth:false,innerHeight:false,initialWidth:false,initialHeight:false,maxWidth:false,maxHeight:false,scalePhotos:false,opacity:0,preloading:false,current:" {current} {total}",previous:"",next:"",close:"",overlayClose:false,loop:false,scrolling:false,escKey:false,arrowKey:false,top:false,right:false,bottom:false,left:false});
$("button").each(function(item) {
$(this).click(onclick);
});
});
</script>
<style>

.but_lavender {
margin: 10px 0px 0px 0px;
text-decoration: none !important;
color: #333;
font: 100% Arial, Helvetica, sans-serif;
padding: 5px 13px;
font-size: 13px;
border: solid 1px #aaa;
border-color: #99958c;
background: #c0c0c0;
background: -moz-linear-gradient(top, #f7f0fe 0%, #e8d1ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f0fe), color-stop(100%,#e8d1ff));
background: -webkit-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
background: -o-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
background: -ms-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f0fe', endColorstr='#e8d1ff',GradientType=0 );
background: linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
vertical-align: middle;
display: inline-block;
zoom:1;
*display:inline;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
}
.but_lavender:hover {
text-decoration: none;
background: #d0f0c0;
}
.but_lavender:active {
position: relative;
top: 1px;
}
</style>

[CatinTheBread]

Вдруг кому будет полезно вот код для решения моего вопроса.

<script type='text/javascript'>
jQuery(document).ready(function($){ 
    $(".buttons button").on("click", function(){
        var layerIndex = $(this).parents("li").index();
        if(!($(".layers div:eq("+layerIndex+")").hasClass("active"))){
            $(".layers .active").slideToggle(100, function(){
                $(this).removeClass("active");
                $(".layers div:eq("+layerIndex+")")
                .slideToggle(100)
                .addClass("active");
            });    
        }
    });
})
</script>
<style>
*{
    margin: 0;
    padding: 0;
}
.buttons{
    margin-bottom: 10px;
}
.buttons li{
    list-style: none;
    display: inline;
    margin-right: 10px;
}
    .buttons button{
        padding: 5px;
    }
.layers div{
    display: none;
    color: #FFF;
    padding: 10px;
    font: 14px/20px normal Arial, sans-serif;
}
.layers .active{
    display: block;
}
</style>