documentation complete for CollapseInline component

docs/_data/nav.yml

@@ -17,6 +17,7 @@
     - title: Forms
     - title: Labels
     - title: Selections
+    - title: Collapse inline
 
 - title: About
   pages:

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:
+<table>
+  <thead>
+    <tr>
+      <th>Classes</th>
+      <th>Notes</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>.mdb-collapse-inline</code>
+      </td>
+      <td>
+        {% markdown %}Marker class. It is usually included on the `.mdb-form-group` if the collapse scenario has any inputs.{% endmarkdown %}
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <code>.collapse</code>
+      </td>
+      <td>{% markdown %}A bootstrap class signifying the container element for markup that will be initially hidden, but expanded inline.{% endmarkdown %}
+      </td>
+    </tr>
+  </tbody>
+</table>
+
+## 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 %}
+<div class="mdb-form-group mdb-collapse-inline pull-xs-right">
+  <button class="btn mdb-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>
+{% 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 %}

docs/material-design/test.md

@@ -7,10 +7,45 @@ group: material-design
 ## Collapse method for mdb-btn-icon and field
 {% example html %}
 <div class="mdb-form-group mdb-collapse-inline pull-xs-right">
-  <button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#search-field" aria-expanded="false" aria-controls="search-field">
+  <button class="btn mdb-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="search-field" class="collapse width">
+  <span id="collapse-search" class="collapse">
+    <input class="form-control" type="text" id="search" placeholder="Enter your query...">
+  </span>
+</div>
+
+<script>
+  // jquery not loaded yet due to the nature of this jekyll page rendering setup so this is more complicated than normally necessary!
+  document.addEventListener("DOMContentLoaded", function(event) { 
+    setTimeout(function(){
+      // clear field value once closed
+      $('#collapse-search').on('hidden.bs.collapse', function() {
+        $('#search').val('')
+      })
+    }, 1);
+  })
+</script>
+{% 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 %}
+<div class="mdb-form-group mdb-collapse-inline">
+  <button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search2" aria-expanded="false" aria-controls="collapse-search2">
+    <i class="material-icons">search</i>
+  </button>  
+  <span id="collapse-search2" class="collapse">
     <input class="form-control" type="text" id="search" placeholder="Enter your query...">
   </span>
 </div>
@@ -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 %}
 <div class="mdb-form-group mdb-collapse-inline pull-xs-right">
-  <button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#search-field2" aria-expanded="false" aria-controls="search-field2">
+  <button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search3" aria-expanded="false" aria-controls="collapse-search3">
     <i class="material-icons">search</i>
   </button>  
-  <span id="search-field2" class="collapse width">
+  <span id="collapse-search3" class="collapse width">
     <label class="mdb-label-placeholder" for="search2">Enter your query...</label>
     <input class="form-control" type="text" id="search2">
   </span>