Вкладки Jquery не работают, а Jquery переключает конфликт?

jsfiddle здесь - http://jsfiddle.net/XVTKt/

CSS

#tabs{
margin-top:-68px;

}

#tabs li {
list-style:none;
display:inline;
        }
#tabs li a {
padding:16px 27px 16px 27px;
display:inline-block;
background:#666;
color:#fff;
text-decoration:none;
}
#tabs li a:active {
background-color:#0177cd;
color:#000;
        }
#tabs li a:hover {
background-color:#0177cd;
color:#000;
        }

Html

<div id="sidebar"><div id="sidebarcontent">click</div>


<div id="sidebarinner">
<div id="tabs">

<ul>
<li><a href="#tab-1">Sites</a></li>
<li><a href="#tab-2">Apps</a></li>

</ul>

<div class="sidebarinnercontent" id="tab-1"><a href="#" >Site Example Name</a></div>
<div class="sidebarinnercontent" id="tab-2"><a href="#" >Apps Example Name</a></div>

</div>


</div></div>

вкладки в настоящее время показывают весь контент, я не уверен, как он не работает?!. И также похоже, что переключатель и вкладки конфликтуют, поскольку, когда я пытаюсь щелкнуть, чтобы использовать вкладки с "сайтов" в "приложения", он распознает переключатель, а не вкладки? любые предложения, спасибо!