Merge pull request #17 from kmlucy/main

Add desktop-only defaultOpen option
RossMcMillan92 · Dec 30, 2021 · 46a3392 · 46a3392
2 parents 2b718b2 + ea031df
commit 46a3392
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@ Big thanks to [ofekashery, the author of vertical-stack-in-card](https://github.
 | ---------- | ------- | ------------ | ----------------------------------------- |
 | type       | string  |  | `custom:collapsable-cards`           |
 | cards      | list    |  | List of cards                         |
-| defaultOpen | boolean | false | Whether the cards should be visible by default|
+| defaultOpen | string | false | Whether the cards should be visible by default. Can also be set to `desktop-only` to be open by default on desktop and collapsed by default on mobile. |
 | title      | string  | "Toggle" | Dropdown title                       |
 | buttonStyle| string  | "" | CSS overrides for the dropdown toggle button |
 

diff --git a/collapsable-cards.js b/collapsable-cards.js
@@ -13,7 +13,16 @@ class VerticalStackInCard extends HTMLElement {
     if (!config || !config.cards || !Array.isArray(config.cards)) {
       throw new Error('Supply the `cards` property');
     }
-    this.isToggled = config.defaultOpen || false
+
+	let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
+	if (config.defaultOpen == true) {
+	  this.isToggled = true;
+	} else if (config.defaultOpen == 'desktop-only' && !isMobile) {
+	  this.isToggled = true;
+	} else {
+	  this.isToggled = false;
+	}
+
     this._config = config;
     this._refCards = [];
     this.renderCard();