putting a jQuery UI Accordion in a jQuery UI Dialog

Tim picture Tim · May 28, 2010 · Viewed 8.2k times · Source

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

Mottie picture Mottie · May 28, 2010

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.