I have a visuaforce page with jquery tabs.I had to use to Jquery tabs as browser hangs when google charts are used with apex:tabpanel.But these jquery tabs works great if there is no apex:pageblocksection around it.
<apex:page standardController="Account">
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script>
var j$ = jQuery.noConflict();
j$(function() {
j$( "#tabs" ).tabs();
});
</script>
<!-- <script type="text/javascript">
(function($) {
$(function() {
$("#accordion > div").accordion({ header: "h3", collapsible: true });
})
})(jQuery);
</script> -->
</head>
<body>
<apex:pageBlock title="Summary">
<apex:pageBlockSection columns="2" title="SDetails - Who is receiving funding on this series?" id="secGranteeDetails">
<div id="accordion">
<div>
<!-- <h3><a href="#">SDetails - Who is receiving funding on this series?</a></h3> -->
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab1</a></li>
<li><a href="#tabs-2">Tab2 </a></li>
<li><a href="#tabs-3">Tab3 </a></li>
</ul>
<div id="tabs-1">
<apex:include pageName="vfpage1"/> </div>
<div id="tabs-2">
<apex:include pageName="vfpage2"/> </div>
<div id="tabs-3">
<apex:include pageName="vfpage3"/>
</div>
</div>
</div>
</div>
<script>twistSection(document.getElementById("{!$Component.accordion}").childNodes[0].childNodes[0]); </script>
</apex:pageblockSection>
</apex:pageBlock>