jQuery UI Tabs content via ajax position() works only in the first tab - jquery-ui

Question

I am new to jQuery/jQuery UI. I am trying to create multiple tabs in a page(sample.html) which loads dynamic content(temp.html) via ajax. Desired effect is content in temp.html should change according to tab selected. I am using position to place some widgets in positions relative to each other.
The problem I am facing is when i click the first tab, everything is working fine. When i click on the second tab positioning does not work. I have added my code below.
Sample.html
$(function() {
$("#tabs").tabs({
ajaxOptions : {
error : function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab.");
},
cache : false
}
});
});
<div id="content" class="content">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
</div>
</div>
temp.html
#widget1 {
width: 150px;
height: 70px;
top: 20px;
left: 50px
}
#widget2 {
width: 150px;
height: 70px;
}
function resetPositions() {
$("#widget2").position({
my : "left top",
at : "right bottom",
of : "#widget1",
offset : "0 50"
});
}
$(function() {
$(".customAccordion").draggable();
$(".customAccordion").accordion({
collapsible : true,
fillSpace : false,
icons : {
header : "ui-icon-circle-arrow-e",
headerSelected : "ui-icon-circle-arrow-s"
}
});
resetPositions();
});
<div id="widget1" class="customAccordion">
<h3>Widget 1</h3>
<div>Widget 1</div>
</div>
<div id="widget2" class="customAccordion">
<h3>Widget 2</h3>
<div>Widget 2</div>
</div>
Please do let me know if i am making any mistakes.

Answer 1

Possibly a tricky part of jQuery UI, you need to make sure you initialize your accordion(s) BEFORE your tabs
$(".customAccordion").accordion();
$("#tabs").tabs();
Try first to remove your accordion, see if it helps.
Then try to initialize your tabs at the very end.
Then you need to verify loading your html page with AJAX will run its included Javascript... If not, you need to paste that initialization code into the select event of your tabs.
$("#tabs").tabs(
{
select: function(event,ui)
{
// initAccordions();
}
});