Jquery tabs not working and Jquery toggle conflicting?

Question

jsfiddle here - 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>

the tabs are currently showing all content i'm unsure how it isn't working?!. And also it looks like the toggle and the tabs are conflicting as when i try to click to use the tabs from 'sites' to 'apps' it recognises the toggle not the tabs? any suggestions, thanks!

Answer 1

Firstly, the jQuery UI resources were not included in your JSFiddle; this is why the tabs were not working and showing all the content.

Secondly, the reason there appears to be a conflict between the two is that the click event for the links inside the tabs is bubbling up to the #sidebar container and triggering its slide toggle. To prevent this from happening use event.stopPropagation() like so:

$('#tabs a').on('click', function(e){
    e.stopPropagation();
});

Here is the updated fiddle.

I hope this helps!

Answer 2

Include jquery-ui.js

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

and with some corrections

Demo