From 731fef74f12f3ce0092882bc3d8980e28b4d3867 Mon Sep 17 00:00:00 2001
From: REJack <info@rejack.de>
Date: Fri, 24 Jul 2020 21:43:34 +0200
Subject: [PATCH] add expandable tables section

---
 docs/_config.yml                     |   2 +
 docs/javascript/expandable-tables.md | 106 +++++++++++++++++++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 docs/javascript/expandable-tables.md

diff --git a/docs/_config.yml b/docs/_config.yml
index a431b4db6..7bbe8e842 100644
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -67,6 +67,8 @@ navigation:
         url: javascript/toasts.html
       - title: Sidebar Search
         url: javascript/sidebar-search.html
+      - title: Expandable Tables
+        url: javascript/expandable-tables.html
   - title: Browser Support
     url: browser-support.html
     icon: fab fa-chrome
diff --git a/docs/javascript/expandable-tables.md b/docs/javascript/expandable-tables.md
new file mode 100644
index 000000000..c9689c330
--- /dev/null
+++ b/docs/javascript/expandable-tables.md
@@ -0,0 +1,106 @@
+---
+layout: page
+title: Expandable Table Plugin
+---
+
+The expandable table plugin provides simple functionality to create expandable tables. 
+
+##### Example Code
+```html
+<table class="table table-bordered table-hover">
+  <tbody>
+    <tr data-widget="expandable-table" aria-expanded="false">
+      <td>183</td>
+    </tr>
+    <tr class="expandable-body">
+      <td>
+        <p>
+          <!-- YOUR EXPANDABLE TABLE BODY HERE -->
+        </p>
+      </td>
+    </tr>
+    <tr data-widget="expandable-table" aria-expanded="true">
+      <td>219</td>
+    </tr>
+    <tr class="expandable-body">
+      <td>
+        <p>
+          <!-- YOUR EXPANDABLE TABLE BODY HERE -->
+        </p>
+      </td>
+    </tr>
+    <tr data-widget="expandable-table" aria-expanded="true">
+      <td>657</td>
+    </tr>
+    <tr class="expandable-body">
+      <td>
+        <p>
+          <!-- YOUR EXPANDABLE TABLE BODY HERE -->
+        </p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+```
+{: .max-height-300}
+
+
+> ##### Tip!
+> You can control the default visibility with ` aria-expanded="false"`/` aria-expanded="true"` via the expandable table header.
+{: .quote-info}
+
+
+##### Usage
+This plugin can be activated as a jQuery plugin or using the data api. 
+
+###### Data API
+{: .text-bold }
+Add `data-widget="expandable-table"` to a table row to activate the plugin and place a new table row below with the `.expandable-body`-class.
+```html
+<tr data-widget="expandable-table" aria-expanded="true">
+  <td>657</td>
+</tr>
+<tr class="expandable-body">
+  <td>
+    <p>
+    </p>
+  </td>
+</tr>
+``` 
+
+> ##### Tip!
+> To get the correct slide up/down animation place a `div` or `p`-tag inside your expandable table body.
+{: .quote-info}
+
+
+###### jQuery
+{: .text-bold }
+The jQuery API provides more customizable options that allows the developer to toggle the visibilty state of one table row. 
+```js
+$('#expandable-table-header-row').ExpandableTable('toggleRow')
+```
+
+
+##### Methods
+{: .mt-4}
+
+|---
+| Method | Description
+|-|-
+|toggleRow | Toggles the state of the expandable table body between hidden and visible.
+{: .table .table-bordered .bg-light}
+
+Example: `$('#expandable-table-header-row').ExpandableTable('toggleRow')`
+
+
+##### Events
+{: .mt-4}
+
+|---
+| Event Type | Description
+|-|-
+|expanded.lte.expandableTable | Triggered after a expandable table body is expanded.
+|collapsed.lte.expandableTable | Triggered after a expandable table body is collapsed.
+{: .table .table-bordered .bg-light}
+
+Example: `$('#expandable-table-header-row').on('expanded.lte.expandableTable', handleToggledEvent)`