Почему то не работает

[CatinTheBread]

Всем доброго времени суток.
Есть страничка http://osobniak.com/123-2
и есть код, который на jsfiddle.net работает, а на сайте нет? может кто подскажет? буду очень признателен!

$(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");
            });    
        }
    });
})

style type='text/css'>
*{
    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;
    background: #00F;
    color: #FFF;
    padding: 10px;
    font: 14px/20px normal Arial, sans-serif;
}
.layers .active{
    display: block;
}
.but_lavender {
    margin: 10px 0px 0px 0px;
    text-decoration: none !important;
    color: #333;    
    font: 100% Arial, Helvetica, 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>
<ul class="buttons">
    <li><button class='but_lavender'>Рабочее проектирование</button></li>
    <li><button class='but_lavender'>Second</button></li>
    <li><button class='but_lavender'>Third</button></li>
    <li><button class='but_lavender'>Fourth</button></li>
</ul>
<div class="layers">
    <div class="active">One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
</div>

[CatinTheBread]

Вдруг кому будет полезно, проблему решил заменой строки $(function() на jQuery(document).ready(function($){ =)