diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml
index 436923d8..e0f4bcb7 100644
--- a/docs/_data/nav.yml
+++ b/docs/_data/nav.yml
@@ -17,6 +17,7 @@
- title: Forms
- title: Labels
- title: Selections
+ - title: Collapse inline
- title: About
pages:
diff --git a/docs/material-design/collapse-inline.md b/docs/material-design/collapse-inline.md
new file mode 100644
index 00000000..0fd2a610
--- /dev/null
+++ b/docs/material-design/collapse-inline.md
@@ -0,0 +1,78 @@
+---
+layout: docs
+title: Collapse inline
+group: 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 MDB `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
+
+
+
+
+
+ .mdb-collapse-inline
+
+
+ {% markdown %}Marker class. It is usually included on the `.mdb-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 %}
+
+
+
+
+
+
+{% 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 %}
diff --git a/docs/material-design/test.md b/docs/material-design/test.md
index 7592fdfa..8195e305 100644
--- a/docs/material-design/test.md
+++ b/docs/material-design/test.md
@@ -7,10 +7,45 @@ group: material-design
## Collapse method for mdb-btn-icon and field
{% example html %}
-
+
+
+{% endexample %}
+
+
+{% highlight js %}
+ // clear field value once closed
+ $(function() {
+ $('#collapse-search').on('hidden.bs.collapse', function() {
+ $('#search').val('')
+ })
+ });
+{% endhighlight %}
+
+
+## Collapse on the left
+{% example html %}
+
+
+
@@ -22,10 +57,10 @@ group: material-design
Perhaps this isn't worth doing, considering the context. we need to override the top calc to determine where this goes, or perhaps we should switch to a bottom calc for everything?
{% example html %}