Create Draggable Collapsible Elements With Collapsebox.js Plugin

Collapsebox.js is a tiny yet customizable jQuery plugin to make any container elements draggable and collapsible with a custom handle.

Requires jQuery UI's draggable function. Ideal for sliding boxes, accordions, sticky notes, spoiler buttons and more.

Features:

• Allows to set the initial position on page load.
• Easing functions.
• Custom trigger event.
• Custom open/close buttons.
• Callback functions.

How to use it:

1. Include the needed jQuery and jQuery UI libraries on the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2. Download and include the JavaScript jquery.collapsebox.min.js after jQuery.

<script src="/path/to/js/jquery.collapsebox.min.js"></script>

3. Create a collapsible box as follows:

<div id="jquery-collapsebox">
  <div class="handle">Click Me</div>
  <div class="contents">
    Content To Collapse and Expand
  </div>
</div>

4. Attach the function collapsebox to the collapsible box and done.

$('#jquery-collapsebox').collapsebox({

  // required paremters
  handle: '.handle',
  button: '.handle'

});

5. Enable the draggable functionality on the box. Default: 'false'.

$('#jquery-collapsebox').collapsebox({

  handle: '.handle',
  button: '.handle',
  fulcrumX: 'left',
  spaceX: 0,
  fulcrumY: 'top',
  spaceY: 0,
  zIndex: 9999

});

6. Set the position of the box.

$('#jquery-collapsebox').collapsebox({

  handle: '.handle',
  button: '.handle',
  draggable: true

});

7. Customize the event to toggle the box content. Default: 'click'.

$('#jquery-collapsebox').collapsebox({

  handle: '.handle',
  button: '.handle',
  action: 'dblclick'

});

8. Customize the open/close buttons.

$('#jquery-collapsebox').collapsebox({

  handle: '.handle',
  button: '.handle',
  openButtonClass: 'collapsebox-open',
  closeButtonClass: 'collapsebox-close'

});

9. Customize the opacity of the box. Default: '1'.

$('#jquery-collapsebox').collapsebox({

  handle: '.handle',
  button: '.handle',
  opacity: .8

});

10. Customize the animation speed. Default: '300'.

$('#jquery-collapsebox').collapsebox({

  handle: '.handle',
  button: '.handle',
  speed: 500

});

11. Apply an easing function to the box when toggling. Default: 'swing'. You can find more easing functions here.

$('#jquery-collapsebox').collapsebox({

  handle: '.handle',
  button: '.handle',
  easing: 'easeInExpo'

});

12. Available callback functions.

$('#jquery-collapsebox').collapsebox({

  handle: '.handle',
  button: '.handle',
  openBeforeFunc: function(container, handle, button) {
    // do something
  },
  openAfterFunc: function(container, handle, button) {
    // do something
  },
  closeBeforeFunc: function(container, handle, button) {
    // do something
  },
  closeAfterFunc: function(container, handle, button) {
    // do something
  },

});

---

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