Question

I want to trigger accordion when I click minimize button or to be more specific, when we click the minimize button the dialog’s content part gets hidden.

Html Code:

<div id="dialog" title="Title">
<div>
<p>Some Content</p>
</div>
</div>
<button>Minimize</button>

Script Code:

$(function (){
$("#dialog").dialog();
$("button").button({icons:{primary: "ui-icon-minus"},text: false}).insertBefore('.ui-dialog-titlebar-close').click(function(){ 
$("#dialog").accordion({collapsible: true});
});
});

Answer 1

You need to trigger the accordion on the dialog widget instead of the original <div> element. You also need to explicitly specify the title bar as the accordion header:

$("#dialog").dialog("widget").accordion({
    collapsible: true,
    header: "> .ui-dialog-titlebar"
});

You can test it in this fiddle.

EDIT: An accordion might not be the best choice to collapse a dialog to its title, especially if you only want the button to trigger the effect. Maybe you can just use slideToggle() instead:

$("#dialog").slideToggle("fast");

Updated fiddle here.