diff --git a/README.md b/README.md
index d9621d9..bffd09c 100644
--- a/README.md
+++ b/README.md
@@ -18,13 +18,14 @@ Elements are divided into 3 categories.
### Interactions
-| Package | Description | Version |
-| ------------------ | ----------------------------------------------------------------------- | ------- |
-| accordion-element | Single Accordion element | `0.1.0` |
-| accordion-group | Accordion group to hold multiple elements | `0.1.0` |
-| carousel-element | A carousel element that wraps the glide.js library for sliding elements | `0.1.1` |
-| slider-element | CSS only slider element to slide child elements | `0.4.3` |
-| transition-classes | An element that applies classes for various stages of a transition | `0.1.0` |
+| Package | Description | Version |
+| ------------------------ | ----------------------------------------------------------------------- | ------- |
+| accordion-element | Single Accordion element | `0.1.0` |
+| accordion-group | Accordion group to hold multiple elements | `0.1.0` |
+| carousel-element | A carousel element that wraps the glide.js library for sliding elements | `0.1.1` |
+| mobile-accordion-element | Desktop accordion element only, falls back to two blocks on mobile | `0.1.0` |
+| slider-element | CSS only slider element to slide child elements | `0.4.3` |
+| transition-classes | An element that applies classes for various stages of a transition | `0.1.0` |
+
+
+
+
+
+
+
+## [0.1.0] - 2020-10-16
+
+### Added
+* initial release
+
diff --git a/packages/interactions/mobile-accordion-element/README.md b/packages/interactions/mobile-accordion-element/README.md
new file mode 100644
index 0000000..3ec4202
--- /dev/null
+++ b/packages/interactions/mobile-accordion-element/README.md
@@ -0,0 +1,21 @@
+# MobileAccordionElement
+
+`mobile-accordion-element` enables you to...
+
+## How to use
+
+### Installation
+
+```sh
+npm i --save @webtides/mobile-accordion-element
+```
+
+```js
+import '@webtides/mobile-accordion-element';
+```
+
+### Example
+
+```html
+
+```
diff --git a/packages/interactions/mobile-accordion-element/package.json b/packages/interactions/mobile-accordion-element/package.json
new file mode 100644
index 0000000..5ea30a7
--- /dev/null
+++ b/packages/interactions/mobile-accordion-element/package.json
@@ -0,0 +1,43 @@
+{
+ "name": "@webtides/mobile-accordion-element",
+ "version": "0.1.0",
+ "description": "An element that...",
+ "author": "@webtides",
+ "homepage": "https://github.com/webtides/element-library",
+ "license": "MIT",
+ "type": "module",
+ "main": "src/mobile-accordion-element.js",
+ "module": "src/mobile-accordion-element.js",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/webtides/element-library.git",
+ "directory": "packages/interactions/mobile-accordion-element"
+ },
+ "scripts": {
+ "test": "karma start ../../../karma.conf.js --grep \"packages/interactions/mobile-accordion-element/tests/**/*.test.js\"",
+ "test:watch": "karma start ../../../karma.conf.js --auto-watch=true --single-run=false --grep \"packages/interactions/mobile-accordion-element/tests/**/*.test.js\""
+ },
+ "keywords": [
+ "web-components",
+ "custom-elements",
+ "mobile-accordion-element"
+ ],
+ "files": [
+ "docs",
+ "src",
+ "stories",
+ "tests",
+ "translations",
+ "*.js"
+ ],
+ "dependencies": {
+ "@webtides/accordion-element": "0.1.0",
+ "@webtides/element-js": "0.3.0"
+ },
+ "devDependencies": {
+ "@open-wc/demoing-storybook": "^1.13.3",
+ "@open-wc/testing": "^2.5.0"
+ }
+}
+
+
diff --git a/packages/interactions/mobile-accordion-element/src/mobile-accordion-element.css b/packages/interactions/mobile-accordion-element/src/mobile-accordion-element.css
new file mode 100644
index 0000000..caf7e43
--- /dev/null
+++ b/packages/interactions/mobile-accordion-element/src/mobile-accordion-element.css
@@ -0,0 +1,4 @@
+mobile-accordion-element {
+ display: block;
+}
+
diff --git a/packages/interactions/mobile-accordion-element/src/mobile-accordion-element.js b/packages/interactions/mobile-accordion-element/src/mobile-accordion-element.js
new file mode 100644
index 0000000..2f1dcbd
--- /dev/null
+++ b/packages/interactions/mobile-accordion-element/src/mobile-accordion-element.js
@@ -0,0 +1,72 @@
+import { html, defineElement } from '@webtides/element-js';
+import BaseAccordionElement from '@webtides/accordion-element';
+import style from './mobile-accordion-element.css';
+
+export default class MobileAccordionElement extends BaseAccordionElement {
+ renderMobileTemplate = true;
+
+ constructor() {
+ super({ styles: [style] });
+ }
+
+ properties() {
+ return {
+ open: false,
+ maxWidth: 1023,
+ };
+ }
+
+ get mediaQuery() {
+ return `(max-width: ${this.maxWidth}px)`;
+ }
+
+ connected() {
+ const mediaQueryList = window.matchMedia(this.mediaQuery);
+ this.renderMobileTemplate = mediaQueryList.matches;
+
+ mediaQueryList.addEventListener('change', event => {
+ this.renderMobileTemplate = mediaQueryList.matches;
+ this.requestUpdate().then(() => {
+ this.evaluateState();
+ });
+ });
+
+ this.requestUpdate().then(() => {
+ this.evaluateState();
+ });
+ }
+
+ evaluateState() {
+ if (this.renderMobileTemplate) {
+ this.open === true ? this.expand() : this.collapse();
+ }
+ }
+
+ template() {
+ return this.renderMobileTemplate ? this.mobileTemplate() : this.desktopTemplate();
+ }
+
+ mobileTemplate() {
+ return html`
+
+
+ ${this.iconsTemplate()}
+
+
+
+
+ `;
+ }
+
+ desktopTemplate() {
+ return html`
+
+
+ `;
+ }
+}
+
+export function define() {
+ defineElement('mobile-accordion-element', MobileAccordionElement);
+}
+
diff --git a/packages/interactions/mobile-accordion-element/stories/mobile-accordion-element.stories.js b/packages/interactions/mobile-accordion-element/stories/mobile-accordion-element.stories.js
new file mode 100644
index 0000000..c19ed6e
--- /dev/null
+++ b/packages/interactions/mobile-accordion-element/stories/mobile-accordion-element.stories.js
@@ -0,0 +1,20 @@
+import { Story, Meta, html } from '@open-wc/demoing-storybook';
+import { define } from '@webtides/mobile-accordion-element';
+define();
+
+export default {
+ title: 'Interactions/MobileAccordionElement',
+ component: 'mobile-accordion-element',
+};
+
+export const singleComponent = () => html`
+
+ Resize the screen width to see the effect
+
+ - Item 1
+ - Item 2
+ - Item 3
+ - Item 4
+
+
+`;
diff --git a/packages/interactions/mobile-accordion-element/tests/mobile-accordion-element.feature.test.js b/packages/interactions/mobile-accordion-element/tests/mobile-accordion-element.feature.test.js
new file mode 100644
index 0000000..6b43937
--- /dev/null
+++ b/packages/interactions/mobile-accordion-element/tests/mobile-accordion-element.feature.test.js
@@ -0,0 +1,12 @@
+/* eslint-disable no-unused-expressions */
+import { fixture, defineCE, assert, oneEvent, nextFrame } from '@open-wc/testing';
+import { define } from '@webtides/mobile-accordion-element';
+define();
+
+describe('Feature | MobileAccordionElement', () => {
+ it('can connect without errors', async () => {
+ const el = await fixture(``);
+ await nextFrame();
+ });
+});
+
diff --git a/packages/interactions/mobile-accordion-element/tests/mobile-accordion-element.unit.test.js b/packages/interactions/mobile-accordion-element/tests/mobile-accordion-element.unit.test.js
new file mode 100644
index 0000000..be09ee7
--- /dev/null
+++ b/packages/interactions/mobile-accordion-element/tests/mobile-accordion-element.unit.test.js
@@ -0,0 +1,10 @@
+/* eslint-disable no-unused-expressions */
+import { fixture, defineCE, assert, oneEvent, nextFrame } from '@open-wc/testing';
+import MobileAccordionElement from '../src/mobile-accordion-element';
+
+describe('Unit | MobileAccordionElement', () => {
+ it('can be created without errors', async () => {
+ const el = new MobileAccordionElement;
+ });
+});
+