Setting JQuery accordion tab is acting strange

Question

So I have a div that I make an accordion here:

<div id="accordion">
        <h3><a href="#">Process Details</a></h3>
        <div>
            <span style="display:none;" id="dialogProcessId"></span>
            <b>Process:</b> <span id="dialogProcess"></span><br />
            <b>Run Time:</b> <span id="dialogRunTime"></span><br />
            <b>Running:</b> <span id="dialogRunning"></span><br />
            <b>Percent Completed:</b> <span id="dialogPercent"></span><br />
            <b>Status:</b> <span id="dialogStatus"></span><br />
            <b>Start Time:</b> <span id="dialogStart"></span><br />
            <b>Finish Time:</b> <span id="dialogFinish"></span><br />
            <b>Errors:</b> <span id="dialogErrors"></span><br />
            <b>Messages:</b> <span id="dialogMessages"></span><br />
            <b>Parameters:</b> <span id="dialogParameters"></span><br />
            <b>Dependencies:</b> <span id="dialogDependencies"></span>
        </div>
        <h3><a href="#">Edit Parameters</a></h3>
        <div>
            <table id="paramsTable">
                <tr>
                    <th style="display:none;"></th>
                    <th>Name</th>
                    <th>Value&nbsp;<span id="editParamValues" style="color:Blue; cursor:pointer; font-size:smaller;">Edit</span></th>
                    <th>Type</th>
                </tr>
            </table>
        </div>
        <h3><a href="#">View Dependencies</a></h3>
        <div>
            <table id="dependenciesTable">
                <tr>
                    <th>Run ID</th>
                    <th>Process Name</th>
                </tr>
            </table>
        </div>
        <h3><a href="#">View Messages</a></h3>
        <div style="overflow:scroll;">
            <table id="messagesTable">
                <tr>
                    <th>Time Stamp</th>
                    <th>Message</th>
                    <th>Message Type</th>
                    <th>Exception</th>
                    <th>Inner Exception</th>
                    <th>Email</th>
                </tr>
            </table>
        </div>
    </div>

I make this into an accordion like so:

$("#accordion").accordion();

This accordion div however is within another div that gets turned into a JQuery UI Dialog like so:

<div id="detailsDialog">
    <div id="accordion">

$("#detailsDialog").dialog({
        autoOpen: false,
        title: 'Details',
        height: 550,
        width: 800,
        modal: true,
        buttons: {
            "Clear History": function () {
                clearHistory($('#dialogProcessId').text());
            },
            "Close": function () {
                $(this).dialog("close");
            }
        }
    });

And I open the dialog in my app with this method:

function openDialog(id) {
      //$("#accordion").accordion("option", "active", 0);
      refreshDialog(id);
      $("#detailsDialog").dialog("open");
      $('#accordion').mask('Loading...');
  }

The method refreshDialog just makes an AJAX call and fills in all of the different div, span, and text values in the accordion div, and then opens the dialog.

I tried to set the index of the accordion within this openDialog() method, but when I do, it makes it all small and like half opened, and it looks all weird and when I try and switch to a different accordion index they are all very small and stuff. I did this by putting this line of code in openDialog:

$( "#accordion" ).accordion( "option", "active", 1 );

Am I doing something wrong?

Answer 1

I found out the solution. I had to destroy and re-create the accordion in the openDialog everytime, otherwise it would re-create the accordion inside the other accordion.

Basically something as simple as this works:

$("#accordion").accordion("destroy");
$("#accordion").accordion();

Answer 2

I think you need to call the accordion after you open the dialog. Take a look at this jsfiddle and tell me if this solves your problem or helps. Let me know if I misunderstood.