I am trying to make a Dialog/Window appear using igDialog with two tabs - one tab should contain the chart and another - some other information.

First I declare DIVs :

<div id="igDialog1" style="display:none">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Chart</a></li>
<li><a href="#tabs-2">Table</a></li>
</ul>
<div id="tabs-1">
<div id="msg"></div>
<div id="chart"></div>
<div id="legends">
<div id="legend"></div>
<div id="legend2"></div>
</div>
<h3 id="chartTitle">Energy Production by Year</h3>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
</div>
</div>

Then when needed call:

function initializeDialog()
{
$.ig.loader(function()
{
$("#igDialog1").igDialog({
headerText: "Quick view",
width:700,
height:700,
state: "closed",
modal: false,
draggable: true,
resizable: true,
closeOnEscape: true,
});

$("#tabs").tabs(
{
collapsable:true
}
);
}
);
}

When Dialog shows up - First tab is delighted, but information from from the second tab - is also visible. How do I make it work? My goal is that upon click on the row in the grid (this works nicely) - show Dialog with two tabs - one will contain the chart and another table.

Any idea? Should I forget the IGDialog alltogether for this type of functionality?

Thanks!