Expander Card for HomeAssistant

Expander/Collapsible card for HomeAssistant

Please ⭐️ or sponsor this repo if you find it useful.

Demo

---

Expand button as overlay:

---

You can even nest expanders!

---

Clear Background (default theme):

Options

Graphical config supported

Yaml:

Name	Type	Default	Supported options	Description
type	string	Required	custom:expander-card	Type of the card.
title	string	Expander	*	Title (Not displayed if using Title-Card)
clear	boolean	false	true|false	Remove Background
clear-children	boolean	false	true|false	Remove Backgrounds/Borders of child cards
expanded	boolean	false	true|false	Start expanded
expand-id	string	optional	string	Unique ID to use for JS LocalStorage. Will save expanded state
button-background	string	transparent	css-color	Background color of expand button
gap	string	0.6em	css-size	gap between child cards
padding	string	1em	css-size	padding of all card content
child-padding	string	0.5em	css-size	padding of child cards
title-card	object	optional	LovelaceCardConfig	Replace Title with card
title-card-padding	string	0px	css-size	padding of title-card
title-card-button-overlay	boolean	false	true|false	Overlay expand button over title-card
overlay-margin	string	2em	css-size	Margin from top right of expander button (if overlay)
cards	object[]	optional	LovelaceCardConfig[]	Child cards to show when expanded

Installation

HACS

Click on the button below to add this repository to your HACS sources and open the integration in HACS automatically.

Alternatively, you can add it manually by following the documentation here.

The link to the repository is https://github.com/Alia5/lovelace-expander-card

Manual install

1. Download the card

Install the expander-card card by copying lovelace-expander-card.js to <config directory>/www/lovelace-expander-card.js

Bash:

wget https://github.com/Alia5/lovelace-expander-card/releases/download/latest/lovelace-expander-card.js
mv lovelace-expander-card.js /config/www/

2. Link the card to your lovelace ui

The manual way:

Link expander-card inside your ui-lovelace.yaml

resources:
  - url: /local/lovelace-expander-card.js
    type: js

Note on closing the issue tracker

FOSS is broken. People suck

I don't care anymore.