mdb-ui-kit/docs/4.0/material-design/collapse-inline.md

layout	title	group
docs	Collapse inline	material-design

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]({{ site.baseurl }}/components/collapse/) for easy toggle behavior. Since most functionality and documentation (including a rich set of Javascript events) is already provided by the [Bootstrap collapse plugin]({{ site.baseurl }}/components/collapse/), the following will focus only on some samples utilizing the BMD CollapseInline component.

Contents

• Will be replaced with the ToC, excluding the "Contents" header {:toc}

Classes

Below is a list of relevant classes options:

Classes	Notes
.bmd-collapse-inline	{% markdown %}Marker class. It is usually included on the `.bmd-form-group` if the collapse scenario has any inputs.{% endmarkdown %}
.collapse	{% markdown %}A bootstrap class signifying the container element for markup that will be initially hidden, but expanded inline.{% endmarkdown %}

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).

{% example html %}

search

{% endexample %}

Javascript event example

Behavior customization can be achieved by responding to the [collapse plugin's Javascript events]({{ site.baseurl }}/components/collapse/#events).

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

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