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?

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.

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/