jQuery Plugin For Collapsible jQuery UI Dialogs

A simple jQuery plugin which extends the default jQuery UI dialog widget to create a collapsible/extendable dialog window with a collapse button.

How to use it:

1. Load the latest version of jQuery and jQuery UI in the web page.

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

2. Load the jQuery UI Dialog Collapse plugin's files in the web page.

<link rel="stylesheet" href="css/jquery.ui.dialog-collapse.css">
<script src="js/jquery.ui.dialog-collapse.js"></script>

3. Create a normal jQuery UI dialog window.

<div id="demo" title="Dialog title">
  <p>Dialog body</p>
</div>

4. Call the plugin to add a collapse button to the dialog window.

$(document).ready(function() {
  $('#demo').dialog();
});

5. Options and callbacks.

// enable the collapse button
collapseEnabled: true,

// callback functions
beforeCollapse: null,
collapse: null,
beforeCollapseRestore: null,
collapseRestore: null

---

This awesome jQuery plugin is developed by Marko-M. For more Advanced Usages, please check the demo page or visit the official website.