[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>