Collapse inline

The Material Design for Bootstrap CollapseInline plugin allows you to toggle inline content on your pages with a bit of JavaScript and some classes. This plugin utilizes a handful of classes from the Bootstrap collapse plugin for easy toggle behavior. Since most functionality and documentation (including a rich set of Javascript events) is already provided by the Bootstrap collapse plugin, the following will focus only on some samples utilizing the BMD CollapseInline component.

Contents

Classes

Below is a list of relevant classes options:

Classes Notes
.bmd-collapse-inline

Marker class. It is usually included on the .bmd-form-group if the collapse scenario has any inputs.
.collapse

A bootstrap class signifying the container element for markup that will be initially hidden, but expanded inline.

Behavior

  • On shown.bs.collapse (full visibility), the plugin will find the first input of any type and call focus().
  • On blur of the input element, the plugin will call .collapse('hide') to collapse the container.

Example: Search field triggered by an icon button

Click the search icon below (on the right).

<div class="bmd-form-group bmd-collapse-inline pull-xs-right">
  <button class="btn bmd-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-expanded="false" aria-controls="collapse-search">
    <i class="material-icons">search</i>
  </button>  
  <span id="collapse-search" class="collapse">
    <input class="form-control" type="text" id="search" placeholder="Enter your query...">
  </span>
</div>

Javascript event example

Behavior customization can be achieved by responding to the collapse plugin’s Javascript events.

For example, the following code would clear the search input field after collapsing it:

  // clear field value once closed
  $(function() {
    $('#collapse-search').on('hidden.bs.collapse', function() {
      $('#search').val('')
    })
  });