diff --git a/node_modules/mdl-ext/src/accordion/_accordion.scss b/node_modules/mdl-ext/src/accordion/_accordion.scss
new file mode 100644
index 0000000..6109194
--- /dev/null
+++ b/node_modules/mdl-ext/src/accordion/_accordion.scss
@@ -0,0 +1,395 @@
+@charset "UTF-8";
+
+/**
+ * @license
+ * Copyright 2016 Leif Olsen. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * This code is built with Google Material Design Lite,
+ * which is Licensed under the Apache License, Version 2.0
+ */
+
+.mdlext-aria-toggle-plus-minus {
+  @include mdlext-aria-expanded-toggle($font-family: inherit, $font-size: 1.4em);
+}
+
+.mdlext-aria-toggle-material-icons {
+  @include mdlext-aria-expanded-toggle($font-size: 1.3em, $icon: 'expand_more', $icon-expanded: 'expand_less', $icon-offset: -$mdlext-accordion-header-padding);
+}
+
+.mdlext-accordion {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  &__panel {
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  &__tab {
+    @include typo-title();
+
+    font-weight: 400;
+    line-height: 1.1;
+    box-sizing: border-box;
+    position: relative;
+    margin: 0;
+    padding: 0; // $mdlext-accordion-header-padding;
+    min-width: $mdlext-accordion-header-height;
+    min-height: $mdlext-accordion-header-height;
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    user-select: none;
+    color: $mdlext-accordion-header-secondary-color;
+    background-color: $mdlext-accordion-header-background-color;
+    cursor: pointer;
+    overflow: hidden;
+
+    &:focus {
+      outline-offset: -2px;
+      outline-color: $mdlext-accordion-header-focus-outline-color;
+      outline-width: 2px;
+    }
+
+    &[aria-expanded='true'] {
+      background-color: $mdlext-accordion-header-background-open-color;
+    }
+
+    &[aria-selected='true'] {
+      background-color: $mdlext-accordion-header-background-active-color;
+    }
+
+    &[disabled] {
+      background-color: $mdlext-accordion-header-disabled-color;
+      color: $mdlext-accordion-header-secondary-color-disabled;
+      pointer-events: none;
+
+      > * {
+        color: $mdlext-accordion-header-secondary-color-disabled;
+      }
+    }
+
+    &:hover:not([disabled]) {
+      background-color: $mdlext-accordion-header-background-hover-color;
+    }
+
+    > * {
+      margin: 0;
+      padding: 0;
+    }
+
+    &__caption {
+      padding-left: $mdlext-accordion-header-padding;
+      padding-right: $mdlext-accordion-header-padding;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    > *:first-child {
+      padding-left: 0;
+    }
+
+    &--ripple {
+      &[aria-selected='true']::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        background: $mdlext-accordion-ripple-color;
+        opacity: 0;
+        border-radius: 100%;
+        transform: scale(1, 1) translate(-50%);
+        transform-origin: 50% 50%;
+      }
+      &[aria-selected='true']:focus:not(:active)::before {
+        // http://easings.net/
+        animation: mdlext-accordion-tab-ripple 1s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards; // cubic-bezier(0.4, 0.0, 1, 1); //cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards; //ease-out;
+      }
+    }
+  }
+
+  &__tabpanel {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0 $mdlext-accordion-content-padding;
+    color: $mdlext-accordion-content-color;
+    background-color: $mdlext-accordion-content-background-color;
+    display: block;
+    overflow: auto;
+    flex-grow: 1;
+
+    &[hidden] {
+      @include mdlext-visually-hidden;
+    }
+  }
+}
+
+// Vertical layout
+.mdlext-accordion {
+
+  &--vertical {
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    .mdlext-accordion__panel {
+      min-height: $mdlext-accordion-header-height;
+      flex-direction: column;
+    }
+
+    .mdlext-accordion__tab {
+      height: $mdlext-accordion-header-height;
+      border-top: 1px solid $mdlext-accordion-header-border-color;
+      padding-left: $mdlext-accordion-header-padding;
+      padding-right: $mdlext-accordion-header-padding;
+
+      &[aria-selected='true']::after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 1px;
+        width: 100%;
+        display: block;
+        content: " ";
+        background-color: $mdlext-accordion-header-highlight-color;
+        animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
+        transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
+      }
+
+      > * {
+        padding-left: $mdlext-accordion-header-padding;
+      }
+
+      > *:first-child {
+        padding-left: 0;
+      }
+
+      > *:last-child:not(:only-child):not(.mdlext-accordion__tab__caption) {
+        margin-left: auto; // If more than one element, push last element to the right
+      }
+
+      &--ripple {
+        &[aria-selected='true']::before {
+          width: 5%;
+          height: 10%;
+        }
+      }
+
+    }
+
+    .mdlext-accordion__tabpanel {
+      border-top: 1px solid $mdlext-accordion-header-border-color;
+
+      &--animation {
+        transform: scaleY(1);
+        animation: mdlext-accordion-show-tabpanel-y 0.2s ease-in-out;
+
+        &[hidden] {
+          transform: scaleY(0);
+          animation: mdlext-accordion-hide-tabpanel-y 0.2s ease-out;
+          animation-delay: 0.1s;
+        }
+      }
+    }
+  }
+}
+
+// Horizontal layout
+.mdlext-accordion {
+
+  &--horizontal {
+
+    .mdlext-accordion__panel {
+      min-width: $mdlext-accordion-header-height;
+      width: $mdlext-accordion-header-height;
+    }
+
+    &[aria-multiselectable='true'] .mdlext-accordion__panel.is-expanded {
+      width: 100%;
+    }
+
+    .mdlext-accordion__tab {
+      flex-direction: column-reverse;
+      width: $mdlext-accordion-header-height;
+      white-space: nowrap;
+      border-left: 1px solid $mdlext-accordion-header-border-color;
+
+      &[aria-selected='true']::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 100%;
+        width: 1px;
+        display: block;
+        content: " ";
+        background-color: $mdlext-accordion-header-highlight-color;
+
+        // Figure out how to animate a vertical line
+        //animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0.01s alternate forwards;
+        //transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
+      }
+
+      > * {
+        //transform: rotate(-90deg) translateX(50%);
+        transform: rotate(-90deg) translateX($mdlext-accordion-header-padding);
+      }
+
+      > *:last-child:not(:only-child):not(.mdlext-accordion__tab__caption) {
+        // If more than one element, push last element to top
+        margin-bottom: auto;
+        transform: rotate(-90deg) translateX(0);
+      }
+
+      &__caption {
+        transform: rotate(-90deg) translateX(50%);
+        padding-right: $mdlext-accordion-header-padding + 8px;
+      }
+
+      &--ripple {
+        &[aria-selected='true']::before {
+          width: 10%;
+          height: 5%;
+        }
+      }
+    }
+
+    .mdlext-accordion__tabpanel {
+      border-left: 1px solid $mdlext-accordion-header-border-color;
+
+      &--animation {
+        transform: scaleX(1);
+        animation: mdlext-accordion-show-tabpanel-x 0.2s ease-in-out;
+
+        &[hidden] {
+          transform: scaleX(0);
+          animation: mdlext-accordion-hide-tabpanel-x 0.2s ease-out;
+        }
+      }
+    }
+  }
+}
+
+.mdlext-accordion {
+
+  &__panel:first-child > &__tab {
+    // Use container to set outer borders
+    border-top-color: transparent;
+    border-left-color: transparent;
+  }
+
+  &[aria-multiselectable="false"] {
+    .mdlext-accordion__panel.is-expanded {
+      flex-grow: 1;
+    }
+  }
+}
+
+// Making accordion appear disabled.
+// Note: does not prevent tabbing into a disabled accordion
+.mdlext-accordion[disabled] {
+  * {
+    pointer-events: none;
+  }
+  .mdlext-accordion__tab {
+    background-color: $mdlext-accordion-header-disabled-color;
+    color: $mdlext-accordion-header-secondary-color-disabled;
+
+    > * {
+      color: $mdlext-accordion-header-secondary-color-disabled;
+    }
+  }
+  .mdlext-accordion__tabpanel {
+    opacity: 0.8;
+    filter: blur(1px) grayscale(80%);
+  }
+}
+
+
+@keyframes mdlext-accordion-tab-ripple {
+  0% {
+    transform: scale(0, 0);
+    opacity: 1;
+  }
+  20% {
+    transform: scale(25, 25);
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(40, 40);
+  }
+}
+
+/*
+@keyframes mdlext-accordion-show-tabpanel-y {
+  0% { transform: scaleY(0.1); }
+  40% { transform: scaleY(1.03); }
+  60% { transform: scaleY(0.98); }
+  80% { transform: scaleY(1.03); }
+  100% { transform: scaleY(0.98); }
+  80% { transform: scaleY(1.01); }
+  100% { transform: scaleY(1); }
+}
+*/
+
+@keyframes mdlext-accordion-show-tabpanel-y {
+  0% { transform: scaleY(0); }
+  60% { transform: scaleY(1.01); }
+  80% { transform: scaleY(0.98); }
+  100% { transform: scaleY(1); }
+}
+
+@keyframes mdlext-accordion-hide-tabpanel-y {
+  0% { transform: scaleY(1); }
+  60% { transform: scaleY(0.98); }
+  80% { transform: scaleY(1.01); }
+  100% { transform: scaleY(0); }
+}
+
+/*
+@keyframes mdlext-accordion-show-tabpanel-x {
+  0% { transform: scaleX(0.1); }
+  40% { transform: scaleX(1.03); }
+  60% { transform: scaleX(0.98); }
+  80% { transform: scaleX(1.03); }
+  100% { transform: scaleX(0.98); }
+  80% { transform: scaleX(1.01); }
+  100% { transform: scaleX(1); }
+}
+*/
+
+@keyframes mdlext-accordion-show-tabpanel-x {
+  0% { transform: scaleX(0); }
+  60% { transform: scaleX(1.01); }
+  80% { transform: scaleX(0.98); }
+  100% { transform: scaleX(1); }
+}
+
+@keyframes mdlext-accordion-hide-tabpanel-x {
+  0% { transform: scaleX(1); }
+  60% { transform: scaleX(0.98); }
+  80% { transform: scaleX(1.01); }
+  100% { transform: scaleX(0); }
+}
diff --git a/node_modules/mdl-ext/src/accordion/accordion.js b/node_modules/mdl-ext/src/accordion/accordion.js
new file mode 100644
index 0000000..0ef7bef
--- /dev/null
+++ b/node_modules/mdl-ext/src/accordion/accordion.js
@@ -0,0 +1,549 @@
+/**
+ * @license
+ * Copyright 2016 Leif Olsen. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * This code is built with Google Material Design Lite,
+ * which is Licensed under the Apache License, Version 2.0
+ */
+
+/**
+ * A WAI-ARIA friendly accordion component.
+ * An accordion is a collection of expandable panels associated with a common outer container. Panels consist
+ * of a header and an associated content region or tabpanel. The primary use of an Accordion is to present multiple sections
+ * of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy.
+ * The general look is similar to a tree where each root tree node is an expandable accordion header. The user navigates
+ * and makes the contents of each panel visible (or not) by interacting with the Accordion Header
+ */
+
+import {
+  VK_ENTER,
+  VK_SPACE,
+  VK_END,
+  VK_HOME,
+  VK_ARROW_LEFT,
+  VK_ARROW_UP,
+  VK_ARROW_RIGHT,
+  VK_ARROW_DOWN,
+  IS_EXPANDED,
+  IS_UPGRADED,
+  ARIA_MULTISELECTABLE,
+  ARIA_EXPANDED,
+  ARIA_HIDDEN,
+  ARIA_SELECTED
+} from '../utils/constants';
+
+
+(function() {
+  'use strict';
+  const ACCORDION            = 'mdlext-accordion';
+  const ACCORDION_VERTICAL   = 'mdlext-accordion--vertical';
+  const ACCORDION_HORIZONTAL = 'mdlext-accordion--horizontal';
+  const PANEL                = 'mdlext-accordion__panel';
+  const PANEL_ROLE           = 'presentation';
+  const TAB                  = 'mdlext-accordion__tab';
+  const TAB_CAPTION          = 'mdlext-accordion__tab__caption';
+  const TAB_ROLE             = 'tab';
+  const TABPANEL             = 'mdlext-accordion__tabpanel';
+  const TABPANEL_ROLE        = 'tabpanel';
+  const RIPPLE_EFFECT        = 'mdlext-js-ripple-effect';
+  const RIPPLE               = 'mdlext-accordion__tab--ripple';
+  const ANIMATION_EFFECT     = 'mdlext-js-animation-effect';
+  const ANIMATION            = 'mdlext-accordion__tabpanel--animation';
+
+  /**
+   * @constructor
+   * @param {Element} element The element that will be upgraded.
+   */
+  const MaterialExtAccordion = function MaterialExtAccordion( element ) {
+
+    // Stores the Accordion HTML element.
+    this.element_ = element;
+
+    // Initialize instance.
+    this.init();
+  };
+  window['MaterialExtAccordion'] = MaterialExtAccordion;
+
+
+  // Helpers
+  const accordionPanelElements = ( element ) => {
+    if(!element) {
+      return {
+        panel: null,
+        tab: null,
+        tabpanel: null
+      };
+    }
+    else if (element.classList.contains(PANEL)) {
+      return {
+        panel: element,
+        tab: element.querySelector(`.${TAB}`),
+        tabpanel: element.querySelector(`.${TABPANEL}`)
+      };
+    }
+    else {
+      return {
+        panel: element.parentNode,
+        tab: element.parentNode.querySelector(`.${TAB}`),
+        tabpanel: element.parentNode.querySelector(`.${TABPANEL}`)
+      };
+    }
+  };
+
+
+  // Private methods.
+
+  /**
+   * Handles custom command event, 'open', 'close', 'toggle' or upgrade
+   * @param event. A custom event
+   * @private
+   */
+  MaterialExtAccordion.prototype.commandHandler_ = function( event ) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if(event && event.detail) {
+      this.command(event.detail);
+    }
+  };
+
+  /**
+   * Dispatch toggle event
+   * @param {string} state
+   * @param {Element} tab
+   * @param {Element} tabpanel
+   * @private
+   */
+  MaterialExtAccordion.prototype.dispatchToggleEvent_ = function ( state, tab, tabpanel ) {
+    const ce = new CustomEvent('toggle', {
+      bubbles: true,
+      cancelable: true,
+      detail: { state: state, tab: tab, tabpanel: tabpanel }
+    });
+    this.element_.dispatchEvent(ce);
+  };
+
+  /**
+   * Open tab
+   * @param {Element} panel
+   * @param {Element} tab
+   * @param {Element} tabpanel
+   * @private
+   */
+  MaterialExtAccordion.prototype.openTab_ = function( panel, tab, tabpanel ) {
+    panel.classList.add(IS_EXPANDED);
+    tab.setAttribute(ARIA_EXPANDED, 'true');
+    tabpanel.removeAttribute('hidden');
+    tabpanel.setAttribute(ARIA_HIDDEN, 'false');
+    this.dispatchToggleEvent_('open', tab, tabpanel);
+  };
+
+  /**
+   * Close tab
+   * @param {Element} panel
+   * @param {Element} tab
+   * @param {Element} tabpanel
+   * @private
+   */
+  MaterialExtAccordion.prototype.closeTab_ = function( panel, tab, tabpanel ) {
+    panel.classList.remove(IS_EXPANDED);
+    tab.setAttribute(ARIA_EXPANDED, 'false');
+    tabpanel.setAttribute('hidden', '');
+    tabpanel.setAttribute(ARIA_HIDDEN, 'true');
+    this.dispatchToggleEvent_('close', tab, tabpanel);
+  };
+
+  /**
+   * Toggle tab
+   * @param {Element} panel
+   * @param {Element} tab
+   * @param {Element} tabpanel
+   * @private
+   */
+  MaterialExtAccordion.prototype.toggleTab_ = function( panel, tab, tabpanel ) {
+    if( !(this.element_.hasAttribute('disabled') || tab.hasAttribute('disabled')) ) {
+      if (tab.getAttribute(ARIA_EXPANDED).toLowerCase() === 'true') {
+        this.closeTab_(panel, tab, tabpanel);
+      }
+      else {
+        if (this.element_.getAttribute(ARIA_MULTISELECTABLE).toLowerCase() !== 'true') {
+          this.closeTabs_();
+        }
+        this.openTab_(panel, tab, tabpanel);
+      }
+    }
+  };
+
+  /**
+   * Open tabs
+   * @private
+   */
+  MaterialExtAccordion.prototype.openTabs_ = function() {
+    if (this.element_.getAttribute(ARIA_MULTISELECTABLE).toLowerCase() === 'true') {
+      [...this.element_.querySelectorAll(`.${ACCORDION} > .${PANEL}`)]
+        .filter(panel => !panel.classList.contains(IS_EXPANDED))
+        .forEach(closedItem => {
+          const tab = closedItem.querySelector(`.${TAB}`);
+          if (!tab.hasAttribute('disabled')) {
+            this.openTab_(closedItem, tab, closedItem.querySelector(`.${TABPANEL}`));
+          }
+        });
+    }
+  };
+
+  /**
+   * Close tabs
+   * @private
+   */
+  MaterialExtAccordion.prototype.closeTabs_ = function() {
+    [...this.element_.querySelectorAll(`.${ACCORDION} > .${PANEL}.${IS_EXPANDED}`)]
+      .forEach( panel => {
+        const tab = panel.querySelector(`.${TAB}`);
+        if(!tab.hasAttribute('disabled')) {
+          this.closeTab_(panel, tab, panel.querySelector(`.${TABPANEL}`));
+        }
+      });
+  };
+
+
+  // Public methods.
+
+  /**
+   * Upgrade an individual accordion tab
+   * @public
+   * @param {Element} tabElement The HTML element for the accordion panel.
+   */
+  MaterialExtAccordion.prototype.upgradeTab = function( tabElement ) {
+
+    const { panel, tab, tabpanel } = accordionPanelElements( tabElement );
+
+    const disableTab = () => {
+      panel.classList.remove(IS_EXPANDED);
+      tab.setAttribute('tabindex', '-1');
+      tab.setAttribute(ARIA_EXPANDED, 'false');
+      tabpanel.setAttribute('hidden', '');
+      tabpanel.setAttribute(ARIA_HIDDEN, 'true');
+    };
+
+    const enableTab = () => {
+      if(!tab.hasAttribute(ARIA_EXPANDED)) {
+        tab.setAttribute(ARIA_EXPANDED, 'false');
+      }
+
+      tab.setAttribute('tabindex', '0');
+
+      if(tab.getAttribute(ARIA_EXPANDED).toLowerCase() === 'true') {
+        panel.classList.add(IS_EXPANDED);
+        tabpanel.removeAttribute('hidden');
+        tabpanel.setAttribute(ARIA_HIDDEN, 'false');
+      }
+      else {
+        panel.classList.remove(IS_EXPANDED);
+        tabpanel.setAttribute('hidden', '');
+        tabpanel.setAttribute(ARIA_HIDDEN, 'true');
+      }
+    };
+
+    // In horizontal layout, caption must have a max-width defined to prevent pushing elements to the right of the caption out of view.
+    // In JsDom, offsetWidth and offsetHeight properties do not work, so this function is not testable.
+    /* istanbul ignore next */
+    const calcMaxTabCaptionWidth = () => {
+
+      const tabCaption = tab.querySelector(`.${TAB_CAPTION}`);
+      if(tabCaption !== null) {
+        const w = [...tab.children]
+          .filter( el => el.classList && !el.classList.contains(TAB_CAPTION) )
+          .reduce( (v, el) => v + el.offsetWidth, 0 );
+
+        const maxWidth = tab.clientHeight - w;
+        if(maxWidth > 0) {
+          tabCaption.style['max-width'] = `${maxWidth}px`;
+        }
+      }
+    };
+
+    const selectTab = () => {
+      if( !tab.hasAttribute(ARIA_SELECTED) ) {
+        [...this.element_.querySelectorAll(`.${TAB}[aria-selected="true"]`)].forEach(
+          selectedTab => selectedTab.removeAttribute(ARIA_SELECTED)
+        );
+        tab.setAttribute(ARIA_SELECTED, 'true');
+      }
+    };
+
+    const tabClickHandler = () => {
+      this.toggleTab_(panel, tab, tabpanel);
+      selectTab();
+    };
+
+    const tabFocusHandler = () => {
+      selectTab();
+    };
+
+    const tabpanelClickHandler = () => {
+      selectTab();
+    };
+
+    const tabpanelFocusHandler = () => {
+      selectTab();
+    };
+
+    const tabKeydownHandler = e => {
+
+      if(this.element_.hasAttribute('disabled')) {
+        return;
+      }
+
+      if ( e.keyCode === VK_END        || e.keyCode === VK_HOME
+        || e.keyCode === VK_ARROW_UP   || e.keyCode === VK_ARROW_LEFT
+        || e.keyCode === VK_ARROW_DOWN || e.keyCode === VK_ARROW_RIGHT ) {
+
+        let nextTab = null;
+        let keyCode = e.keyCode;
+
+        if (keyCode === VK_HOME) {
+          nextTab = this.element_.querySelector(`.${PANEL}:first-child > .${TAB}`);
+          if(nextTab && nextTab.hasAttribute('disabled')) {
+            nextTab = null;
+            keyCode = VK_ARROW_DOWN;
+          }
+        }
+        else if (keyCode === VK_END) {
+          nextTab = this.element_.querySelector(`.${PANEL}:last-child > .${TAB}`);
+          if(nextTab && nextTab.hasAttribute('disabled')) {
+            nextTab = null;
+            keyCode = VK_ARROW_UP;
+          }
+        }
+
+        if(!nextTab) {
+          let nextPanel = panel;
+
+          do {
+            if (keyCode === VK_ARROW_UP || keyCode === VK_ARROW_LEFT) {
+              nextPanel = nextPanel.previousElementSibling;
+              if(!nextPanel) {
+                nextPanel = this.element_.querySelector(`.${PANEL}:last-child`);
+              }
+              if (nextPanel) {
+                nextTab = nextPanel.querySelector(`.${PANEL} > .${TAB}`);
+              }
+            }
+            else if (keyCode === VK_ARROW_DOWN || keyCode === VK_ARROW_RIGHT) {
+              nextPanel = nextPanel.nextElementSibling;
+              if(!nextPanel) {
+                nextPanel = this.element_.querySelector(`.${PANEL}:first-child`);
+              }
+              if (nextPanel) {
+                nextTab = nextPanel.querySelector(`.${PANEL} > .${TAB}`);
+              }
+            }
+
+            if(nextTab && nextTab.hasAttribute('disabled')) {
+              nextTab = null;
+            }
+            else {
+              break;
+            }
+          }
+          while(nextPanel !== panel);
+        }
+
+        if (nextTab) {
+          e.preventDefault();
+          e.stopPropagation();
+          nextTab.focus();
+
+          // Workaround for JSDom testing:
+          // In JsDom 'element.focus()' does not trigger any focus event
+          if(!nextTab.hasAttribute(ARIA_SELECTED)) {
+
+            [...this.element_.querySelectorAll(`.${TAB}[aria-selected="true"]`)]
+              .forEach( selectedTab => selectedTab.removeAttribute(ARIA_SELECTED) );
+
+            nextTab.setAttribute(ARIA_SELECTED, 'true');
+          }
+        }
+      }
+      else if (e.keyCode === VK_ENTER || e.keyCode === VK_SPACE) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.toggleTab_(panel, tab, tabpanel);
+      }
+    };
+
+    if(tab === null) {
+      throw new Error('There must be a tab element for each accordion panel.');
+    }
+
+    if(tabpanel === null) {
+      throw new Error('There must be a tabpanel element for each accordion panel.');
+    }
+
+    panel.setAttribute('role', PANEL_ROLE);
+    tab.setAttribute('role', TAB_ROLE);
+    tabpanel.setAttribute('role', TABPANEL_ROLE);
+
+    if(tab.hasAttribute('disabled')) {
+      disableTab();
+    }
+    else {
+      enableTab();
+    }
+
+    if( this.element_.classList.contains(ACCORDION_HORIZONTAL)) {
+      calcMaxTabCaptionWidth();
+    }
+
+    if (this.element_.classList.contains(RIPPLE_EFFECT)) {
+      tab.classList.add(RIPPLE);
+    }
+
+    if (this.element_.classList.contains(ANIMATION_EFFECT)) {
+      tabpanel.classList.add(ANIMATION);
+    }
+
+    // Remove listeners, just in case ...
+    tab.removeEventListener('click', tabClickHandler);
+    tab.removeEventListener('focus', tabFocusHandler);
+    tab.removeEventListener('keydown', tabKeydownHandler);
+    tabpanel.removeEventListener('click', tabpanelClickHandler);
+    tabpanel.removeEventListener('focus', tabpanelFocusHandler);
+
+    tab.addEventListener('click', tabClickHandler);
+    tab.addEventListener('focus', tabFocusHandler);
+    tab.addEventListener('keydown', tabKeydownHandler);
+    tabpanel.addEventListener('click', tabpanelClickHandler, true);
+    tabpanel.addEventListener('focus', tabpanelFocusHandler, true);
+  };
+  MaterialExtAccordion.prototype['upgradeTab'] = MaterialExtAccordion.prototype.upgradeTab;
+
+
+  /**
+   * Execute command
+   * @param detail
+   */
+  MaterialExtAccordion.prototype.command = function( detail ) {
+
+    const openTab = tabElement => {
+
+      if(tabElement === undefined) {
+        this.openTabs_();
+      }
+      else if(tabElement !== null) {
+        const { panel, tab, tabpanel } = accordionPanelElements( tabElement );
+        if(tab.getAttribute(ARIA_EXPANDED).toLowerCase() !== 'true') {
+          this.toggleTab_(panel, tab, tabpanel);
+        }
+      }
+    };
+
+    const closeTab = tabElement => {
+      if(tabElement === undefined) {
+        this.closeTabs_();
+      }
+      else if(tabElement !== null) {
+        const { panel, tab, tabpanel } = accordionPanelElements( tabElement );
+
+        if(tab.getAttribute(ARIA_EXPANDED).toLowerCase() === 'true') {
+          this.toggleTab_(panel, tab, tabpanel);
+        }
+      }
+    };
+
+    const toggleTab = tabElement => {
+      if(tabElement) {
+        const { panel, tab, tabpanel } = accordionPanelElements( tabElement );
+        this.toggleTab_(panel, tab, tabpanel);
+      }
+    };
+
+
+    if(detail && detail.action) {
+      const { action, target } = detail;
+
+      switch (action.toLowerCase()) {
+        case 'open':
+          openTab(target);
+          break;
+        case 'close':
+          closeTab(target);
+          break;
+        case 'toggle':
+          toggleTab(target);
+          break;
+        case 'upgrade':
+          if(target) {
+            this.upgradeTab(target);
+          }
+          break;
+        default:
+          throw new Error(`Unknown action "${action}". Action must be one of "open", "close", "toggle" or "upgrade"`);
+      }
+    }
+  };
+  MaterialExtAccordion.prototype['command'] = MaterialExtAccordion.prototype.command;
+
+
+  /**
+   * Initialize component
+   */
+  MaterialExtAccordion.prototype.init = function() {
+    if (this.element_) {
+      // Do the init required for this component to work
+      if( !(this.element_.classList.contains(ACCORDION_HORIZONTAL) || this.element_.classList.contains(ACCORDION_VERTICAL))) {
+        throw new Error(`Accordion must have one of the classes "${ACCORDION_HORIZONTAL}" or "${ACCORDION_VERTICAL}"`);
+      }
+
+      this.element_.setAttribute('role', 'tablist');
+
+      if(!this.element_.hasAttribute(ARIA_MULTISELECTABLE)) {
+        this.element_.setAttribute(ARIA_MULTISELECTABLE, 'false');
+      }
+
+      this.element_.removeEventListener('command', this.commandHandler_);
+      this.element_.addEventListener('command', this.commandHandler_.bind(this), false);
+
+      [...this.element_.querySelectorAll(`.${ACCORDION} > .${PANEL}`)].forEach( panel => this.upgradeTab(panel) );
+
+      // Set upgraded flag
+      this.element_.classList.add(IS_UPGRADED);
+    }
+  };
+
+
+  /*
+   * Downgrade component
+   * E.g remove listeners and clean up resources
+   *
+   * Nothing to downgrade
+   *
+   MaterialExtAccordion.prototype.mdlDowngrade_ = function() {
+     'use strict';
+     console.log('***** MaterialExtAccordion.mdlDowngrade');
+   };
+   */
+
+
+  // The component registers itself. It can assume componentHandler is available
+  // in the global scope.
+  /* eslint no-undef: 0 */
+  componentHandler.register({
+    constructor: MaterialExtAccordion,
+    classAsString: 'MaterialExtAccordion',
+    cssClass: 'mdlext-js-accordion',
+    widget: true
+  });
+})();
diff --git a/node_modules/mdl-ext/src/accordion/readme.md b/node_modules/mdl-ext/src/accordion/readme.md
new file mode 100644
index 0000000..e8ddd3a
--- /dev/null
+++ b/node_modules/mdl-ext/src/accordion/readme.md
@@ -0,0 +1,384 @@
+# Accordion
+![Accordion](../../etc/flexbox-accordion.png)
+
+A WAI-ARIA friendly accordion component.
+
+>**Note:** The accordion has been refactored and is not compatible with accordion prior to version 0.9.13
+
+## Introduction
+An accordion component is a collection of expandable panels associated with a common outer container. Panels consist
+of a tab header and an associated content region or panel. The primary use of an Accordion is to present multiple sections
+of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy.
+The general look is similar to a tree where each root tree node is an expandable accordion header. The user navigates
+and makes the contents of each panel visible (or not) by interacting with the Accordion tab header.
+
+### Features:
+* The accordion component relates to the guidelines given in [WAI-ARIA Authoring Practices 1.1, Accordion](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion) 
+* User interactions via keyboard or mouse 
+* Toggle a particular tab  using enter or space key, or by clicking a tab
+* Client can interact with accordion using a public api og by dispatching a custom action event 
+* The accordion emits a custom toggle events reflecting the tab toggled
+
+
+### To include a MDLEXT **accordion** component:
+
+&nbsp;1. Code a `<ul>` element with `class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal"`  to hold the accordion with horizontal layout. 
+```html
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal">
+</ul>
+```
+
+&nbsp;2. Code a `<li>` element with `class="mdlext-accordion__panel"`  to hold an individual accordion panel. 
+```html
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal">
+  <li class="mdlext-accordion__panel">
+  </li>
+</ul>
+```
+
+&nbsp;3. Code a `<header>` element with `class="mdlext-accordion__tab"`  to hold the accordion tab header. 
+```html
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal">
+  <li class="mdlext-accordion__panel">
+    <header class="mdlext-accordion__tab">
+    </header>
+  </li>
+</ul>
+```
+
+&nbsp;4. Code a `<span>` element with `class="mdlext-accordion__tab__caption"` to hold the accordion tab header caption. 
+```html
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal">
+  <li class="mdlext-accordion__panel">
+    <header class="mdlext-accordion__tab">
+      <span class="mdlext-accordion__tab__caption">A tab caption</span>
+    </header>
+  </li>
+</ul>
+```
+
+&nbsp;5. Code a `<section>` element with `class="mdlext-accordion__tabpanel"`  to hold the tab content. 
+```html
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal">
+  <li class="mdlext-accordion__panel">
+    <header class="mdlext-accordion__tab">
+      <span class="mdlext-accordion__tab__caption">A tab caption</span>
+    </header>
+    <section class="mdlext-accordion__tabpanel">
+      <p>Content goes here ...</p>
+    </section>
+  </li>
+</ul>
+```
+
+&nbsp;6. Repeat steps 2..5 for each accordion panel required. 
+
+### Example
+Multiselectable vertical accordion with three panels, aria attributes, ripple effect on each tab header, decorated with 
+a glyph left and a state icon right. Tab #1 is open at page load (aria-expanded="true"). Subscribes to accordion toggle event.
+
+```html
+<ul id="my-accordion" 
+  class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect"
+  role="tablist" aria-multiselectable="true">
+
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" role="tab" aria-expanded="true">
+      <i class="material-icons">dns</i>
+      <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+      <h5>Content #1 goes here</h5>
+      <p>Some content <a href="#">with an anchor</a> as a focusable element.</p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" role="tab" aria-expanded="false">
+      <i class="material-icons">all_inclusive</i>
+      <span class="mdlext-accordion__tab__caption">Tab #2</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="true" hidden>
+      <h5>Content #2 goes here</h5>
+      <p>Some content....</p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" role="tab" aria-expanded="false">
+      <i class="material-icons">build</i>
+      <span class="mdlext-accordion__tab__caption">Tab #3</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="true" hidden>
+      <h5>Content #3 goes here</h5>
+    </section>
+  </li>
+</ul>
+
+<script>
+  'use strict';
+  window.addEventListener('load', function() {
+    var accordion = document.querySelector('#my-accordion');
+    accordion.addEventListener('toggle', function(e) {
+      console.log('Accordion toggled. State:', e.detail.state, 'Source:', e.detail.tab);
+    });
+  });
+</script>
+
+```
+>**Note:** All required aria attributes will be added by the accordion component during initialization - so it is not 
+strictly necessary to apply the attributes in markup.
+
+### More examples
+* The [snippets/accordion.html](./snippets/accordion.html) and the [tests](../../test/accordion/accordion.spec.js) provides more detailed examples.
+* Try out the [live demo](http://leifoolsen.github.io/mdl-ext/demo/accordion.html)
+
+
+## Keyboard interaction
+The accordion interacts with the following keyboard keys.
+
+*   <kbd>Tab</kbd> - When focus is on an accordion (tab)header, pressing the <kbd>Tab</kbd> key moves focus in the following manner:
+    1.  If interactive glyphs or menus are present in the accordion header, focus moves to each in order.
+    2.  When the corresponding tab panel is expanded (its [aria-expanded](http://www.w3.org/TR/wai-aria-1.1/#aria-expanded) state is 'true'), then focus moves to the first focusable element in the panel.
+    3.  If the panel is collapsed (its aria-expanded state is 'false'), OR, when the last interactive element of a panel is reached, the next <kbd>Tab</kbd> key press moves focus as follows:
+        *   Moves focus to the next logical accordion header.
+        *   When focus reaches the last header, focus moves to the first focusable element outside the accordion component.
+*   <kbd>Left arrow</kbd>
+    *   When focus is on the accordion header, a press of <kbd>up</kbd>/<kbd>left</kbd> arrow keys moves focus to the previous logical accordion header.
+    *   When focus reaches the first header, further <kbd>up</kbd>/<kbd>left</kbd> arrow key presses optionally wrap to the first header.
+*   <kbd>Right arrow</kbd>
+    *   When focus is on the accordion header, a press of <kbd>down</kbd>/<kbd>right</kbd> arrow key moves focus to the next logical accordion header.
+    *   When focus reaches the last header, further <kbd>down</kbd>/<kbd>right</kbd> arrow key presses optionally wrap to the first header
+*   <kbd>Up arrow</kbd> - behaves the same as left arrow
+*   <kbd>Down arrow</kbd> - behaves the same as <kbd>right arrow</kbd>
+*   <kbd>End</kbd> - When focus is on the accordion header, an <kbd>End</kbd> key press moves focus to the last accordion header.
+*   <kbd>Home</kbd> - When focus is on the accordion header, a <kbd>Home</kbd> key press moves focus to the first accordion header.
+*   <kbd>Enter</kbd> or <kbd>Space</kbd> - When focus is on an accordion header, pressing <kbd>Enter</kbd> ir <kbd>Space</kbd> toggles the expansion of the corresponding panel.
+    *   If collapsed, the panel is expanded, and its aria-expanded state is set to 'true'.
+    *   If expanded, the panel is collapsed and its aria-expanded state is set to 'false'.
+*   <kbd>Shift+Tab</kbd> - Generally the reverse of <kbd>Tab</kbd>.
+
+
+## Events
+Interaction with the component programmatically is performed receiving events from the component or by sending events to 
+the component (or by using the public api).  
+
+### Events the component listenes to
+A client can send a `command` custom event to the accordion. The command event holds a detail object defining the action 
+to perform and a target for the action.
+
+The detail object has the following structure:
+```javascript
+detail: { 
+  action, // "open", "close", "toggle" or "upgrade" 
+  target  // Target, panel or tab, of action, "undefined" if all panels should be targeted.
+          // Note: If you send a null target, the action is cancelled
+}
+```
+
+Possible actions are:
+
+#### open
+Open a targeted tab and it's corresponding tabpanel.
+
+```javascript
+myAccrdion = document.querySelector('#my-accordion');
+target = myAccordion.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(3)'); 
+ce = new CustomEvent('command', { detail: { action : 'open', target: target } });
+```
+If `target` is undefined, the action will open all panels.
+**Note**: Opening all panels only makes sense if the accordion has the aria attribute `aria-multiselectable` set to `true`, 
+and will be cancelled otherwise. 
+
+#### close
+Close a targeted tab and its corresponding tabpanel.
+
+```javascript
+myAccrdion = document.querySelector('#my-accordion');
+target = myAccordion.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(3)'); 
+ce = new CustomEvent('command', { detail: { action : 'close', target: target } });
+```
+If `target` is undefined, the action will close all panels.
+**Note**: Closing all panels only makes sense if the accordion has the aria attribute `aria-multiselectable` set to `true`, 
+and will be cancelled otherwise. 
+
+#### toggle
+Toggle a targeted tab. Open or close a targeted tab and it's corresponding tabpanel.
+
+```javascript
+myAccrdion = document.querySelector('#my-accordion');
+target = myAccordion.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(3)'); 
+ce = new CustomEvent('command', { detail: { action : 'toggle', target: target } });
+```
+If `target` is undefined, the action will be cancelled.
+
+#### upgrade
+Upgrade a targeted panel. If you add a panel to the accordion after the page has loaded, you must call `upgrade` to 
+notify the accordion component about the new panel.
+
+```javascript
+myAccrdion = document.querySelector('#my-accordion');
+addedPanel = myAccordion.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(4)'); 
+ce = new CustomEvent('command', { detail: { action : 'upgrade', target: addedPanel } });
+```
+If `target` is undefined, the action will be cancelled.
+
+#### Example: Expand all panels.
+```javascript
+var ce = new CustomEvent( 'command', { 
+  detail: { 
+    action: 'open' 
+  } 
+});
+document.querySelector('#my-accordion').dispatchEvent(ce);
+```
+
+#### Example: Toggle a spesific tab.
+```javascript
+var panel3 = document.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(3) .mdlext-accordion__tab');
+var ce = new CustomEvent('command', { 
+  detail: { 
+    action: 'toggle', 
+    target: panel3 
+  } 
+});
+document.querySelector('#my-accordion').dispatchEvent(ce);
+```
+
+#### Example: Append a new panel.
+```javascript
+var panel =
+  '<li class="mdlext-accordion__panel">'
+  +  '<header class="mdlext-accordion__tab" aria-expanded="true">'
+  +    '<span class="mdlext-accordion__tab__caption">New Tab</span>'
+  +    '<i class="mdlext-aria-toggle-material-icons"></i>'
+  +  '</header>'
+  +  '<section class="mdlext-accordion__tabpanel">'
+  +    '<h5>New tab content</h5>'
+  +    '<p>Some content</p>'
+  +  '</section>'
+  +'</li>';
+
+var accordion = document.querySelector('#my-accordion');
+accordion.insertAdjacentHTML('beforeend', panel);
+
+var theNewPanel = document.querySelector('#my-accordion .mdlext-accordion__panel:last-child');
+var ce = new CustomEvent('command', { detail: { action : 'upgrade', target: theNewPanel } });
+document.querySelector('#my-accordion').dispatchEvent(ce);
+```
+
+Refer to [snippets/accordion.html](./snippets/accordion.html) or the [tests](../../test/accordion/accordion.spec.js) for detailed usage.
+
+
+### Events emitted from the component
+The accordion emits a custom `toggle` event when a panel opens or closes. The event has a detail object with the following structure:
+
+```javascript
+detail: {
+  state,    // "open" or "close"
+  tab,      // the haeder tab element instance that caused the event
+  tabpanel  // the cooresponding tabpanel element instance
+}
+```
+
+Set up an event listener to receive the toggle event.
+```javascript
+document.querySelector('#my-accordion').addEventListener('toggle', function(e) {
+  console.log('Accordion toggled. State:', e.detail.state, 'Source:', e.detail.source);
+});
+```
+Refer to [snippets/accordion.html](./snippets/accordion.html) or the [tests](../../test/accordion/accordion.spec.js) for detailed usage.
+
+
+## Public methods
+
+### upgradeTab(tabOrPanelElement)
+Upgrade a targeted panel with aria attributes and ripple effects. If you add a panel to the accordion after the page has 
+loaded, you must call `upgrade` to notify the accordion component about the newly added panel.
+
+```javascript
+var accordion = document.querySelector('#my-accordion');
+var panel3 = document.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(3)');
+accordion.MaterialExtAccordion.upgradeTab( panel3 );
+```
+
+### command(detail)
+Executes an action, targeting a specific tab. The actions corresponds to the custom events defined for this component.
+ 
+The detail object parameter has the following structure:
+```javascript
+detail: { 
+  action, // "open", "close", "toggle" or "upgrade" 
+  target  // Target, panel or tab, of action, "undefined" if all panels should be targeted.
+          // Note: If you send a null target, the action is cancelled
+}
+```
+
+#### open: command( {action: 'open', target: tabOrPanelElement } )
+Open a targeted tab and it's corresponding tabpanel.
+
+#### close: command( {action: 'close', target: tabOrPanelElement } )
+Close a targeted tab and it's corresponding tabpanel.
+
+#### toggle: command( {action: 'toggle', target: tabOrPanelElement } )
+Toggle a targeted tab. Open or close a targeted tab and it's corresponding tabpanel.
+
+#### upgrade: command( {action: 'upgrade', target: tabOrPanelElement } )
+Upgrade a targeted panel with aria attributes and ripple effects. If you add a panel to the accordion after the page has 
+loaded, you must call `upgrade` to notify the accordion component about the newly added panel.
+
+#### Example: Expand all panels.
+```javascript
+var accordion = document.querySelector('#my-accordion');
+accordion.MaterialExtAccordion.command( {action: 'open'} );
+```
+
+#### Example: Toggle panel.
+```javascript
+var accordion = document.querySelector('#my-accordion');
+var panel3 = document.querySelector('#my-accordion .mdlext-accordion__panel:nth-child(3) .mdlext-accordion__tab');
+accordion.MaterialExtAccordion.command( {action: 'toggle', target: panel3} );
+```
+
+Refer to [snippets/accordion.html](./snippets/accordion.html) or the [tests](../../test/accordion/accordion.spec.js) for detailed usage.
+
+
+## Configuration options
+
+The MDLEXT CSS classes apply various predefined visual and behavioral enhancements to the accordion. 
+The table below lists the available classes and their effects.
+
+| MDLEXT class | Effect | Remarks |
+|--------------|--------|---------|
+|`mdlext-accordion`| Defines container as an MDL component | Required on "outer" `<div>` or `<ul>` element |
+|`mdlext-js-accordion`| Assigns basic MDL behavior to accordion | Required on "outer" `<div>` or `<ul>` element |
+|`mdlext-accordion--horizontal`| Horizontal layot of an accordion | Required. The accordion must have one of `mdlext-accordion--horizontal` or `mdlext-accordion--vertical` defined |
+|`mdlext-accordion--vertical`| Vertical layot of an accordion | Required. The accordion must have one of `mdlext-accordion--horizontal` or `mdlext-accordion--vertical` defined |
+|`mdlext-js-ripple-effect`| Applies ripple click effect to accordion tab header | Optional. Goes on "outer" `<ul>` or `<div>` element |
+|`mdlext-js-animation-effect`| Applies animation effect to accordion tab panel | Optional. Goes on "outer" `<ul>` or `<div>` element |
+|`mdlext-accordion__panel`| Defines a container for each section of the accordion - the tab and tabpanel element | Required on first inner `<div>` element or `<li>` element  |
+|`mdlext-accordion__tab`| Defines a tab header for a corresponding tabpanel | Required on `<header>` or `<div>` element |
+|`mdlext-accordion__tabpanel`| The content | Required on `<section>` or `<div>` element |
+
+
+The table below lists available attributes and their effects.
+
+| Attribute | Description | Remarks |
+|-----------|-------------|---------|
+|`aria-multiselectable`| If true, multiple panels may be open simultaneously | Required. Add `aria-multiselectable="true"` to the `mdlext-accordion` element to keep multiple panels open at the same time. If not present, the component will set `aria-multiselectable="false"` during initialization.|
+|`role=tablist`| Component role | Required. Added by component during initialization if not present. |
+|`role=presentation`| Accordion panel role | Required. Added by component during initialization if not present. |
+|`role=tab`| Accordion tab header role | Required. Added by component during initialization if not present. |
+|`aria-expanded`| Accordion tab header attribute.  An accordion should manage the expanded/collapsed state of each tab by maintain its aria-expanded state. | Required. Defaults to `aria-expanded="false"`. Set `aria-expanded="true"` if you want a tab to open during page load. |
+|`aria-selected`| Accordion tab header attribute. An accordion should manage the selected state of each tab by maintaining its aria-selected state | Optional. Added by component. |
+|`disabled`| Accordion tab header attribute. Indicates a disabled tab and tabpanel | Optional. If this attribute is present, the tabpanel will not open or close. |
+|`role=tabpanel`| Accordion tabpanel role. | Required. Added by component during initialization if not present. |
+|`aria-hidden`| Accordion tabpanel attribute. An accordion should convey the visibility of each tabpanel by maintaining its aria-hidden state | Required. Added by component. |
+|`hidden`| Accordion tabpanel attribute. | Required. Added by component if `aria-hidden="true"`. |
+ 
+
+## Other examples 
+* The Accordion component is based on / inspired by this [CodePen](http://codepen.io/aann/pen/dPqBML)
+* [Open Ajax, Tab Panel: Accordian1](http://www.oaa-accessibility.org/examplep/accordian1/)
+* [www3 Accordion Example](https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion1.html)
diff --git a/node_modules/mdl-ext/src/accordion/snippets/accordion.html b/node_modules/mdl-ext/src/accordion/snippets/accordion.html
new file mode 100644
index 0000000..fae785c
--- /dev/null
+++ b/node_modules/mdl-ext/src/accordion/snippets/accordion.html
@@ -0,0 +1,1072 @@
+<p>A Collection of panels within a common outer pane.</p>
+<p><strong>Note:</strong> The accordion has been refactored and is not compatible with the accordion prior to version 0.9.13</p>
+
+
+<h4>Horizontal accordion, ripple effect, animated tabpanel, aria-multiselectable="false"</h4>
+
+<style>
+  .demo-accordion-1 {
+    height: 300px; /* In horizontal layout, the accordion must have a height */
+  }
+  .demo-accordion-1 .mdlext-accordion__tabpanel {
+    background-color: rgba(239, 154, 154, 0.4);  /* Just a trace color */
+  }
+</style>
+
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal mdlext-js-ripple-effect mdlext-js-animation-effect demo-accordion-1"
+    role="tablist" aria-multiselectable="false">
+
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+      <i class="material-icons">info</i>
+      <span class="mdlext-accordion__tab__caption">First tab. A long caption should not push the state icon</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+      <h5>Content #1 goes here</h5>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+      </p>
+      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+        blandit leo ullamcorper vel.
+      </p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+      </p>
+      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+        blandit leo ullamcorper vel.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+      <span class="mdlext-accordion__tab__caption">Tab #2</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+      <h5>Content #2 goes here</h5>
+      <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
+      <i class="material-icons">warning</i>
+      <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+      <h5>Content #3 goes here</h5>
+      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+      <i class="material-icons">accessibility</i>
+      <i class="material-icons">help_outline</i>
+      <i class="material-icons">radio</i>
+      <span class="mdlext-accordion__tab__caption">Tab #4</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+      <h5>Content #4 goes here</h5>
+      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+      <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+      <h5>Content #5 goes here</h5>
+      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+</ul>
+
+
+
+<h4>Horizontal accordion, aria-multiselectable="true"</h4>
+<p><strong>Hint:</strong> Use a container to draw outer borders</p>
+
+<style>
+  .demo-accordion-2-container {
+    border: 1px solid #00b0ff;
+  }
+  .demo-accordion-2 {
+    height: 313px;
+  }
+  .demo-accordion-2 .mdlext-accordion__tabpanel {
+    background-color: rgba(206, 147, 216, 0.4);
+  }
+</style>
+
+<div class="demo-accordion-2-container">
+  <ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal demo-accordion-2" role="tablist" aria-multiselectable="true">
+
+    <li class="mdlext-accordion__panel" role="presentation">
+      <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+        <i class="material-icons">info</i>
+        <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
+        <i class="mdlext-aria-toggle-material-icons"></i>
+      </header>
+      <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+        <h5>Content #1 goes here</h5>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+          Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+          in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+          ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+        </p>
+        <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+          justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+          mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+          neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+          blandit leo ullamcorper vel.
+        </p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+          Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+          in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+          ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+        </p>
+        <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+          justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+          mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+          neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+          blandit leo ullamcorper vel.
+        </p>
+      </section>
+    </li>
+    <li class="mdlext-accordion__panel" role="presentation">
+      <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+        <span class="mdlext-accordion__tab__caption">Tab #2</span>
+        <i class="mdlext-aria-toggle-material-icons"></i>
+      </header>
+      <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+        <h5>Content #2 goes here</h5>
+        <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+          arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
+        </p>
+      </section>
+    </li>
+    <li class="mdlext-accordion__panel" role="presentation">
+      <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
+        <i class="material-icons">warning</i>
+        <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+        <i class="mdlext-aria-toggle-material-icons"></i>
+      </header>
+      <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+        <h5>Content #3 goes here</h5>
+        <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+          ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+          maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+        </p>
+      </section>
+    </li>
+    <li class="mdlext-accordion__panel" role="presentation">
+      <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+        <i class="material-icons">accessibility</i>
+        <i class="material-icons">help_outline</i>
+        <i class="material-icons">radio</i>
+        <span class="mdlext-accordion__tab__caption">Tab #4, no toggle icon</span>
+      </header>
+      <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+        <h5>Content #4 goes here</h5>
+        <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+          ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+          maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+        </p>
+      </section>
+    </li>
+    <li class="mdlext-accordion__panel" role="presentation">
+      <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+        <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+        <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+        <i class="mdlext-aria-toggle-material-icons"></i>
+      </header>
+      <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+        <h5>Content #5 goes here</h5>
+        <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+          ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+          maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+        </p>
+      </section>
+    </li>
+  </ul>
+</div>
+
+
+
+<h4>Vertical accordion, ripple effect, animated tabpanel, aria-multiselectable="true"</h4>
+
+<style>
+  .demo-accordion-3 .mdlext-accordion__tabpanel {
+    background-color: rgba(144, 202, 249, 0.4);
+  }
+</style>
+
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect mdlext-js-animation-effect demo-accordion-3"
+    role="tablist" aria-multiselectable="true">
+
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+      <i class="material-icons">info</i>
+      <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+      <h5>Content #1 goes here</h5>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+      </p>
+      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+        blandit leo ullamcorper vel.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+      <span class="mdlext-accordion__tab__caption">Tab #2</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+      <h5>Content #2 goes here</h5>
+      <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
+      <i class="material-icons">warning</i>
+      <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+      <h5>Content #3 goes here</h5>
+      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+      <i class="material-icons">accessibility</i>
+      <i class="material-icons">help_outline</i>
+      <i class="material-icons">radio</i>
+      <span class="mdlext-accordion__tab__caption">Tab #4, no toggle icon</span>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+      <h5>Content #4 goes here</h5>
+      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+      <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel">
+      <h5>Content #5 goes here</h5>
+      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+</ul>
+
+
+<h4>Vertical accordion, aria-multiselectable="false"</h4>
+<p><strong>Hint:</strong> Use a container to draw outer borders</p>
+
+<style>
+  .demo-accordion-4 {
+    height: 500px;
+    border: 1px solid #00b0ff;
+  }
+  .demo-accordion-4 .mdlext-accordion__tabpanel {
+    background-color: rgba(165, 214, 167, 0.4);
+  }
+</style>
+
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical demo-accordion-4" role="tablist" aria-multiselectable="false">
+
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+      <i class="material-icons">info</i>
+      <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel">
+      <h5>Content #1 goes here</h5>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+      </p>
+      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+        blandit leo ullamcorper vel.
+      </p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+      <span class="mdlext-accordion__tab__caption">Tab #2</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel">
+      <h5>Content #2 goes here</h5>
+      <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled>
+      <i class="material-icons">warning</i>
+      <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+      <h5>Content #3 goes here</h5>
+      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+      <i class="material-icons">accessibility</i>
+      <i class="material-icons">help_outline</i>
+      <i class="material-icons">radio</i>
+      <span class="mdlext-accordion__tab__caption">Tab #4</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel">
+      <h5>Content #4 goes here</h5>
+      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+      <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel">
+      <h5>Content #5 goes here</h5>
+      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+</ul>
+
+
+<h4>Disabled accordion</h4>
+<ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal demo-accordion-1"
+    role="tablist" aria-multiselectable="false" disabled>
+
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+      <i class="material-icons">info</i>
+      <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+      <h5>Content goes here</h5>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+      </p>
+      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+        blandit leo ullamcorper vel.
+      </p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+      </p>
+      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+        blandit leo ullamcorper vel.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+      <span class="mdlext-accordion__tab__caption">Tab #2</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
+      <i class="material-icons">warning</i>
+      <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+      <i class="material-icons">accessibility</i>
+      <i class="material-icons">help_outline</i>
+      <i class="material-icons">radio</i>
+      <span class="mdlext-accordion__tab__caption">Tab #4</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+      <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+    </section>
+  </li>
+</ul>
+
+
+
+
+<h4>Accordion API</h4>
+
+<style>
+  .cmd-button {
+    min-width: 140px;
+  }
+  .demo-accordion-6 .mdlext-accordion__tabpanel {
+    background: rgba(255, 224, 130, 0.4);
+  }
+</style>
+
+<h5>Public methods</h5>
+
+<section style="margin-bottom: 16px">
+  <button id="btn-api-expand-all" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+    Expand all
+  </button>
+  <button id="btn-api-collapse-all" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+    Collapse all
+  </button>
+  <button id="btn-api-open-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+    Open tab #2
+  </button>
+  <button id="btn-api-close-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+    Close tab #2
+  </button>
+  <button id="btn-api-toggle-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+    Toggle tab #2
+  </button>
+  <button id="btn-api-new-tab" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+    Add a new tab
+  </button>
+</section>
+
+<h5>Custom events</h5>
+
+<section style="margin-bottom: 16px">
+  <button id="btn-event-expand-all" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+    Expand all
+  </button>
+  <button id="btn-event-collapse-all" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+    Collapse all
+  </button>
+  <button id="btn-event-open-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+    Open tab #2
+  </button>
+  <button id="btn-event-close-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+    Close tab #2
+  </button>
+  <button id="btn-event-toggle-tab2" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+    Toggle tab #2
+  </button>
+  <button id="btn-event-new-tab" class="cmd-button mdl-button mdl-js-button mdl-button--raised">
+    Add a new tab
+  </button>
+</section>
+
+
+<ul id="demo-accordion-6" class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical demo-accordion-6"
+    role="tablist" aria-multiselectable="true">
+
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+      <i class="material-icons">info</i>
+      <span class="mdlext-accordion__tab__caption">Tab #1</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+      <h5>Content #1 goes here</h5>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+      </p>
+      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+        blandit leo ullamcorper vel.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+      <span class="mdlext-accordion__tab__caption">Tab #2</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+      <h5>Content #2 goes here</h5>
+      <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
+      <i class="material-icons">warning</i>
+      <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+      <h5>Content #3 goes here</h5>
+      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+      <i class="material-icons">accessibility</i>
+      <i class="material-icons">help_outline</i>
+      <i class="material-icons">radio</i>
+      <span class="mdlext-accordion__tab__caption">Tab #4</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+      <h5>Content #4 goes here</h5>
+      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel" role="presentation">
+    <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+      <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+      <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+      <i class="mdlext-aria-toggle-material-icons"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel" role="tabpanel">
+      <h5>Content #5 goes here</h5>
+      <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+      </p>
+    </section>
+  </li>
+</ul>
+
+
+
+<h4>Styling the accordion</h4>
+
+<style>
+  .demo-accordion-7 {
+    height: 300px;
+  }
+  .demo-accordion-7 .mdlext-accordion__panel,
+  .demo-accordion-7 .mdlext-accordion__tab {
+    min-width: 40px;
+    min-height: 40px;
+    width: 40px;
+  }
+  .colored-panel:nth-child(1) {
+    background: rgba(239, 154, 154, 0.4);
+  }
+  .colored-panel:nth-child(2) {
+    background: rgba(206, 147, 216, 0.4);
+  }
+  .colored-panel:nth-child(3) {
+    background: rgba(144, 202, 249, 0.4);
+  }
+  .colored-panel:nth-child(4) {
+    background: rgba(165, 214, 167, 0.4);
+  }
+  .colored-panel:nth-child(5) {
+    background: rgba(255, 224, 130, 0.4);
+  }
+  .mdlext-aria-toggle-plus-minus {
+    font-size: 20px;
+  }
+  .img-box {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+  }
+  .img-box--6 {
+    background-image: url(./images/_D806374.jpg);
+    background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 100%), url(./images/_D806374.jpg);
+  }
+  .img-box--7 {
+    background-image: url('./images/_D802478.jpg');
+    background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 100%), url(./images/_D802478.jpg);
+  }
+  .img-box--8 {
+    background-image: url('./images/_D803221.jpg');
+    background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 100%), url(./images/_D803221.jpg);
+  }
+  .img-box--9 {
+    background-image: url('./images/_D802143-2.jpg');
+    background-image: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0.2) 100%), url(./images/_D802143-2.jpg);
+  }
+  .img-box--10 {
+    background-image: url('./images/_D809758-2.jpg');
+    background-image: linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.1) 100%), url(./images/_D809758-2.jpg);
+  }
+</style>
+
+<ul id="demo-accordion-7" class="mdlext-accordion mdlext-js-accordion mdlext-accordion--horizontal mdlext-js-ripple-effect mdlext-js-animation-effect demo-accordion-7">
+  <li class="mdlext-accordion__panel colored-panel">
+    <header class="mdlext-accordion__tab" aria-expanded="true">
+      <i class="material-icons md-16">dns</i>
+      <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Accordion</span>
+      <i class="mdlext-aria-toggle-plus-minus"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel img-box img-box--6">
+      <h5>Introduction</h5>
+      <p>An accordion component is a collection of expandable panels associated with a common outer container. Panels consist
+        of a header and an associated content region or panel. The primary use of an Accordion is to present multiple sections
+        of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy.
+        The general look is similar to a tree where each root tree node is an expandable accordion header. The user navigates
+        and makes the contents of each panel visible (or not) by interacting with the Accordion Header.</p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel colored-panel">
+    <header class="mdlext-accordion__tab">
+      <i class="material-icons md-16">all_inclusive</i>
+      <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Include Component</span>
+      <i class="mdlext-aria-toggle-plus-minus"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel img-box img-box--7">
+      <p style = "margin-top:128px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.</p>
+      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+        blandit leo ullamcorper vel.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.</p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel colored-panel">
+    <header class="mdlext-accordion__tab">
+      <i class="material-icons md-16">build</i>
+      <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Configuration Options</span>
+      <i class="mdlext-aria-toggle-plus-minus"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel img-box img-box--8">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.</p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel colored-panel">
+    <header class="mdlext-accordion__tab">
+      <i class="material-icons md-16">public</i>
+      <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Fourth section</span>
+      <i class="mdlext-aria-toggle-plus-minus"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel img-box img-box--9">
+      <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+        justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+        mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+        neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+        blandit leo ullamcorper vel.</p>
+    </section>
+  </li>
+  <li class="mdlext-accordion__panel colored-panel">
+    <header class="mdlext-accordion__tab">
+      <i class="material-icons md-16">public</i>
+      <span class="mdlext-accordion__tab__caption mdl-typography--subhead-color-contrast">Fifth</span>
+      <i class="mdlext-aria-toggle-plus-minus"></i>
+    </header>
+    <section class="mdlext-accordion__tabpanel img-box img-box--10">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+        Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+        in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+        ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+        maximus massa felis quis quam. Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+        arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.</p>
+    </section>
+  </li>
+</ul>
+
+
+
+<h4>Color themes</h4>
+
+<div class="mdl-grid">
+  <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone mdlext-dark-color-theme">
+
+    <ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect mdlext-js-animation-effect"
+        role="tablist" aria-multiselectable="true">
+
+      <li class="mdlext-accordion__panel" role="presentation">
+        <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+          <i class="material-icons">info</i>
+          <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
+          <i class="mdlext-aria-toggle-material-icons"></i>
+        </header>
+        <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+          <h5>Content #1 goes here</h5>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+            Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+            in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+            ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+          </p>
+          <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+            justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+            mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+            neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+            blandit leo ullamcorper vel.
+          </p>
+        </section>
+      </li>
+      <li class="mdlext-accordion__panel" role="presentation">
+        <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+          <span class="mdlext-accordion__tab__caption">Tab #2</span>
+          <i class="mdlext-aria-toggle-material-icons"></i>
+        </header>
+        <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+          <h5>Content #2 goes here</h5>
+          <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+            arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
+          </p>
+        </section>
+      </li>
+      <li class="mdlext-accordion__panel" role="presentation">
+        <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
+          <i class="material-icons">warning</i>
+          <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+          <i class="mdlext-aria-toggle-material-icons"></i>
+        </header>
+        <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+          <h5>Content #3 goes here</h5>
+          <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+            ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+            maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+          </p>
+        </section>
+      </li>
+      <li class="mdlext-accordion__panel" role="presentation">
+        <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+          <i class="material-icons">accessibility</i>
+          <i class="material-icons">help_outline</i>
+          <i class="material-icons">radio</i>
+          <span class="mdlext-accordion__tab__caption">Tab #4, no toggle icon</span>
+        </header>
+        <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+          <h5>Content #4 goes here</h5>
+          <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+            ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+            maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+          </p>
+        </section>
+      </li>
+      <li class="mdlext-accordion__panel" role="presentation">
+        <header class="mdlext-accordion__tab" role="tab">
+          <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+          <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+          <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+          <i class="mdlext-aria-toggle-material-icons"></i>
+        </header>
+        <section class="mdlext-accordion__tabpanel" role="tabpanel">
+          <h5>Content #5 goes here</h5>
+          <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+            ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+            maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+          </p>
+        </section>
+      </li>
+    </ul>
+  </div>  <!-- mdl-cell -->
+
+  <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet mdl-cell--2-col-phone">
+    <ul class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect mdlext-js-animation-effect mdlext-light-color-theme"
+        role="tablist" aria-multiselectable="true">
+
+      <li class="mdlext-accordion__panel" role="presentation">
+        <header class="mdlext-accordion__tab" aria-expanded="true" role="tab">
+          <i class="material-icons">info</i>
+          <span class="mdlext-accordion__tab__caption">First section. A long caption should not push the state icon</span>
+          <i class="mdlext-aria-toggle-material-icons"></i>
+        </header>
+        <section class="mdlext-accordion__tabpanel" role="tabpanel" aria-hidden="false">
+          <h5>Content #1 goes here</h5>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique eget augue eget gravida.
+            Etiam eget imperdiet massa. Aliquam nisi eros, molestie a vulputate quis, tempor nec quam. Ut at libero
+            in sem pellentesque imperdiet. Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+            ac dignissim odio tortor nec quam.Fusce tincidunt leo in est <a href="#">venenatis porta</a>.
+          </p>
+          <p>Maecenas eu vestibulum orci. Ut eget nisi a est sagittis euismod a vel
+            justo. Quisque at dui urna. Duis vel velit leo. Nulla nunc sem, rutrum at aliquet in, aliquet id velit. Duis
+            mattis placerat erat, a aliquam leo rhoncus vel. Sed nec diam ex. Praesent convallis purus lorem, vel porttitor
+            neque gravida quis. Etiam et malesuada dui. Nunc vitae viverra dui. Suspendisse feugiat efficitur augue, quis
+            blandit leo ullamcorper vel.
+          </p>
+        </section>
+      </li>
+      <li class="mdlext-accordion__panel" role="presentation">
+        <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+          <span class="mdlext-accordion__tab__caption">Tab #2</span>
+          <i class="mdlext-aria-toggle-material-icons"></i>
+        </header>
+        <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+          <h5>Content #2 goes here</h5>
+          <p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie
+            arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.
+          </p>
+        </section>
+      </li>
+      <li class="mdlext-accordion__panel" role="presentation">
+        <header class="mdlext-accordion__tab" aria-expanded="false" role="tab" disabled tabindex="0">
+          <i class="material-icons">warning</i>
+          <span class="mdlext-accordion__tab__caption">Tab #3, disabled</span>
+          <i class="mdlext-aria-toggle-material-icons"></i>
+        </header>
+        <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+          <h5>Content #3 goes here</h5>
+          <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+            ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+            maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+          </p>
+        </section>
+      </li>
+      <li class="mdlext-accordion__panel" role="presentation">
+        <header class="mdlext-accordion__tab" aria-expanded="false" role="tab">
+          <i class="material-icons">accessibility</i>
+          <i class="material-icons">help_outline</i>
+          <i class="material-icons">radio</i>
+          <span class="mdlext-accordion__tab__caption">Tab #4, no toggle icon</span>
+        </header>
+        <section class="mdlext-accordion__tabpanel" role="tabpanel" hidden aria-hidden="true">
+          <h5>Content #4 goes here</h5>
+          <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+            ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+            maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+          </p>
+        </section>
+      </li>
+      <li class="mdlext-accordion__panel" role="presentation">
+        <header class="mdlext-accordion__tab" role="tab">
+          <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">favorite</i></button>
+          <button class="mdl-button mdl-button--icon mdl-button--colored"><i class="material-icons">share</i></button>
+          <span class="mdlext-accordion__tab__caption">Tab #5, with icon buttons</span>
+          <i class="mdlext-aria-toggle-material-icons"></i>
+        </header>
+        <section class="mdlext-accordion__tabpanel" role="tabpanel">
+          <h5>Content #5 goes here</h5>
+          <p>Praesent pretium, sapien vel mollis porttitor, felis magna vehicula metus,
+            ac dignissim odio tortor nec quam. Nam molestie, arcu id maximus lacinia, ante ipsum posuere mauris, ac
+            maximus massa felis quis quam. usce tincidunt leo in est venenatis porta.
+          </p>
+        </section>
+      </li>
+    </ul>
+  </div>  <!-- mdl-cell -->
+</div> <!-- mdl-grid -->
+
+
+
+<p class="mdl-typography--caption" style="margin-top: 64px;">
+  All images appearing in this page are the exclusive property of Leif Olsen and are protected under the United States and International Copyright laws.
+  The images may not be reproduced or manipulated without the written permission of Leif Olsen.
+  Use of any image as the basis for another photographic concept or illustration (digital, artist rendering or alike) is a violation of the United States and International Copyright laws.
+  All images are copyrighted &copy; Leif Olsen, 2016.
+</p>
+
+<script>
+  (function() {
+    'use strict';
+
+    function insertPanel() {
+      var panel =
+        '<li class="mdlext-accordion__panel">'
+        +  '<header class="mdlext-accordion__tab" aria-expanded="true">'
+        +    '<span class="mdlext-accordion__tab__caption">New Tab</span>'
+        +    '<i class="mdlext-aria-toggle-material-icons"></i>'
+        +  '</header>'
+        +  '<section class="mdlext-accordion__tabpanel">'
+        +    '<h5>New tab content</h5>'
+        +    '<p>Curabitur malesuada placerat nunc, id dapibus justo tempor in. Ut molestie'
+        +      'arcu justo, id volutpat eros vestibulum eget. Fusce tincidunt leo in est venenatis porta.'
+        +    '</p>'
+        +  '</section>'
+        +'</li>';
+
+      var accordion = document.querySelector('#demo-accordion-6');
+      accordion.insertAdjacentHTML('beforeend', panel);
+    }
+
+    window.addEventListener('load', function() {
+
+      // Listen to accordion toggle event
+      document.querySelector('#demo-accordion-6').addEventListener('toggle', function(e) {
+        //console.log('Accordion tab toggled. New state:', e.detail.state, 'Tab:', e.detail.tab, 'Tabpanel:', e.detail.tabpanel);
+        console.log('Accordion tab toggled. New state:', e.detail.state);
+      });
+
+      // Interact with accordion using public methods
+      document.querySelector('#btn-api-expand-all').addEventListener('click', function(e) {
+        var accordion = document.querySelector('#demo-accordion-6');
+        accordion.MaterialExtAccordion.command( {action: 'open'} );
+      });
+
+      document.querySelector('#btn-api-collapse-all').addEventListener('click', function(e) {
+        var accordion = document.querySelector('#demo-accordion-6');
+        accordion.MaterialExtAccordion.command( {action: 'close'} );
+      });
+
+      document.querySelector('#btn-api-open-tab2').addEventListener('click', function(e) {
+        var accordion = document.querySelector('#demo-accordion-6');
+        var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2) .mdlext-accordion__tab');
+        accordion.MaterialExtAccordion.command( {action: 'open', target: tab2} );
+      });
+
+      document.querySelector('#btn-api-close-tab2').addEventListener('click', function(e) {
+        var accordion = document.querySelector('#demo-accordion-6');
+        var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2)');
+        accordion.MaterialExtAccordion.command( {action: 'close', target: tab2} );
+      });
+
+      document.querySelector('#btn-api-toggle-tab2').addEventListener('click', function(e) {
+        var accordion = document.querySelector('#demo-accordion-6');
+        var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2)');
+        accordion.MaterialExtAccordion.command( {action: 'toggle', target: tab2} );
+      });
+
+      document.querySelector('#btn-api-new-tab').addEventListener('click', function(e) {
+        insertPanel();
+        var accordion = document.querySelector('#demo-accordion-6');
+        var panelElement  = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:last-child');
+        accordion.MaterialExtAccordion.command( {action: 'upgrade', target: panelElement} );
+      });
+
+      // Interact with accordion using custom event
+      var eventButtons = document.querySelectorAll('button[id^="btn-event-"]');
+      for (var i = 0, n = eventButtons.length; i < n; i++) {
+        eventButtons[i].addEventListener('click', function(e) {
+          var ce;
+          var tab2 = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:nth-child(2)');
+
+          switch (e.target.id) {
+            case 'btn-event-expand-all':
+              ce = new CustomEvent('command', { detail: { action : 'open' } });
+              break;
+            case 'btn-event-collapse-all':
+              ce = new CustomEvent('command', { detail: { action : 'close' } });
+              break;
+            case 'btn-event-open-tab2':
+              ce = new CustomEvent('command', { detail: { action : 'open', target: tab2 } });
+              break;
+            case 'btn-event-close-tab2':
+              ce = new CustomEvent('command', { detail: { action : 'close', target: tab2 } });
+              break;
+            case 'btn-event-toggle-tab2':
+              ce = new CustomEvent('command', { detail: { action : 'toggle', target: tab2 } });
+              break;
+            case 'btn-event-new-tab':
+              insertPanel();
+              var panelElement  = document.querySelector('#demo-accordion-6 .mdlext-accordion__panel:last-child');
+              ce = new CustomEvent('command', { detail: { action : 'upgrade', target: panelElement } });
+              break;
+            default:
+              return;
+          }
+          var accordion = document.querySelector('#demo-accordion-6');
+          accordion.dispatchEvent(ce);
+        });
+      }
+    });
+
+  }());
+
+</script>