I think the problem is that you're missing the jQueryUI CSS. The Accordion effect will work pretty much as-is using the JS but the tabs need the CSS. I downloaded the ThemeRoller and edited the example to just the accordion and tabs, moving tabs into one of the accordion panels, and it works fine. Here's the code if it helps:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Accordion Tabs</title>
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
// Tabs
$('#tabs').tabs();
});
</script>
<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;}
</style>
</head>
<body>
<!-- Accordion -->
<h2>Accordion</h2>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second (Tabs)</a></h3>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">consectetur adipisicing elit, </div>
<div id="tabs-2">, Ut enim ad minim veniam</div>
<div id="tabs-3">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
</div>
</body>
</html>