APEX

Hi

I am trying to integrate JQuery tabs into my application. I have successfully integrated the data picker and the resize text box, so I am fairly confident that I have installed the jquery scripts ok.

The problem I am getting is as follows

In the HTML header I have put...

<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script src="#APP_IMAGES#jquery.cookie.js" type"text/javascript"></script>

<script type="text/javascript">
$().ready(function(){
$("#myTabs").tabs();
});
</script>


I have also tried replacing the last <script> with (thanks to Louis-Guillaume Carrier-Bédard for the example)

<script type="text/javascript">
$().ready(function(){
$("#myTabs > ul").tabs(
{cookie:{expires: 1}
});

$("ul.ui-tabs-nav").css({width:"350px"});
});
</script>


I have created 3 regions on the page

Region 1

This is the unordered list which should become the tab selectors

Region 2

Simple report on sysdate, this should be the first tab

Region 3

Simple report on sysdate, this should be the second tab

The page displays with the list and both report regions displayed.

On inspecting the html code and looking at the jquery examples I think that the div tag for the list should envelope the div's for the regions 2 and 3, but I don't know how to achieve this.

I have created a simple page on apex.oracle.com to demonstrate, any help here would be much appreciated.

Thanks

Paul