jQuery Plugin To Create Collapsible Bootstrap Button Groups - dropbuttons

dropbuttons is a jQuery plugin that automatically collapse Bootstrap button groups into a dropdown when there's no enough screen space (e.g. mobile devices).

Basic usage:

1. Load the jQuery dropbuttons plugin's files into your Bootstrap page.

<link rel="stylesheet" href="jquery.dropbuttons.css">
<script src="jquery.dropbuttons.js"></script>

2. The primary HTML structure. You're allowed to insert as many buttons as possible into the button group.

<div class="btn-toolbar dropbuttons">
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
  <button type="button" class="btn btn-link">Link</button>
  <button type="button" class="btn btn-default">Default 2</button>
  <button type="button" class="btn btn-primary">Primary 2</button>
  <button type="button" class="btn btn-success">Success 2</button>
  <button type="button" class="btn btn-info">Info 2</button>
  <button type="button" class="btn btn-warning">Warning 2</button>
  <button type="button" class="btn btn-danger">Danger 2</button>
  <button type="button" class="btn btn-link">Link 2</button>
  <button type="button" class="btn btn-default">Default 3</button>
  <button type="button" class="btn btn-primary" data-dropbuttons-class="bg-primary">Primary 3</button>
  <button type="button" class="btn btn-success" data-dropbuttons-class="bg-success">Success 3</button>
  <button type="button" class="btn btn-info" data-dropbuttons-class="bg-info">Info 3</button>
  <button type="button" class="btn btn-warning" data-dropbuttons-class="bg-warning">Warning 3</button>
  <button type="button" class="btn btn-danger" data-dropbuttons-class="bg-danger">Danger 3</button>
  <button type="button" class="btn btn-link">Link 3</button>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    </ul>
  </div>
</div>

3. Invoke the plugin with default options.

$(".dropbuttons").dropbuttons();

4. All available options with default values.

$(".dropbuttons").dropbuttons({
  dropdownSelector        : "div.dropdown",
  dropdownMenuSelector    : "ul.dropdown-menu",
  dropdownButtonsSelector : "li",
  visibleButtonsSelector  : ">button:not(.dropdown)",
  autoArrangeButtons      : true,
});

Change log:

2016-10-27

• Added support for wrapped buttons.

---

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