Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/black-tie/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/Marko-M/jquery-ui-dialog-collapse/master/js/jquery.ui.dialog-collapse.js"></script>   
    <meta charset=utf-8 />
    <title>jQuery UI Dialog Collapse</title>
  </head>
  <body>
    <div id="jquery-ui-collapse-dialog" title="jQuery UI Dialog Collapse">
      <p>This is thejQuery UI Dialog Collapse dialog.</p>
    </div>
  </body>
</html>
 
.ui-dialog .ui-dialog-titlebar-collapse,
.ui-dialog .ui-dialog-titlebar-collapse-restore {
  position: absolute;
  right: 0.3em;
  top: 50%;
  width: 21px;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 20px;
}
 
$(document).ready(function() {
  $('#jquery-ui-collapse-dialog').dialog({
    collapseEnabled: true,
    beforeCollapse: function(event, ui) {
      console.log('beforeCollapse');
    },
    collapse: function(event, ui) {
      console.log('collapse');
    },
    beforeCollapseRestore: function(event, ui) {
      console.log('beforeCollapseRestore');
    },
    collapseRestore: function(event, ui) {
      console.log('collapseRestore');
    }
  });
});
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers