Placing jQuery UI Accordion in the jQuery UI Dialog

Question

By creating the appropriate markup for the tabs, I was able to place the jQuery UI Tabs widget inside the JQuery UI dialog box; but to do the same with Accordion did not work: pressing the anchor section of the accordion causes Dialog to close. Is there an easy way to do this?

Answer 1

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

Perhaps you need 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 this is basically the same, add a function call inside the open option.

Answer 2

You can create a div for the dialog and a div inside this 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/