putting a jQuery UI Accordion in a jQuery UI Dialog

Question

By creating the appropriate markup for Tabs, I've been able to place a jQuery UI Tabs widget inside a jQuery UI Dialog; but doing the same with an Accordion has not worked: clicking on the anchor of the accordion section causes the Dialog to close. Is there a straightforward way to accomplish this?

New

Answer 1

Works fine for me... I posted a demo for you.

Maybe you needed to use the "open" option in the dialog function?

  $(function() {
    $("#dialog-modal").dialog({
      height: 400,
      width: 400,
      modal: true,
      open: function(){
        $("#accordion").accordion({ autoHeight: true });
      }
    });
  });

Note: For tabs, it's basically the same thing, add the function call inside the open option.

Coulisse

Thanks very much! Works like a charm. Don't know why my Dialog was closing when the accordion section-header was clicked. It was set up like yours, though mine was not modal, as your example is, and I had multiple stackable dialogs too; but I changed your example to reflect these differences and it still worked. Now that I know it's possible, I can search out what might be causing the problem on my page. Thanks again. – New

Answer 2

You can create a div for the dialog, and a div inside that for the accordion.

HTML Snippet:

<button id='clicker>Click Me</button>
<div id='dialog'>
    <div id='accordion'>
        <h3>Section 1</h3><div><p>Sec 1 Fun</p></div>
        <h3>Section 2</h3><div><p>Sec 2 Fun</p></div>
    </div>
</div>

JavaScript Snippet:

$('#clicker').button().click(function(){
    var overlayDialogObj = {
      autoOpen: true,
      height: 400,
      width: 310,
      modal: false,
      open: function(){
          $('#accordion').accordion(
              {heightStyle: "fill", collapsible: true}).show();
      },
      buttons: {
         'Done': function() {
            $(this).dialog('close');
         }
      }
   };

   $('#dialog').dialog(overlayDialogObj).show();

});

See the fiddle here: http://jsfiddle.net/saylesc/RDwUj/2/

Arri