Collapsable cards
Hide a list of cards behind a dropdown.
collapsable-cards.mov
Big thanks to ofekashery, the author of vertical-stack-in-card, whose code I copied to make this card.
Options
| Name | Type | Default | Description |
|---|---|---|---|
| type | string | custom:collapsable-cards |
|
| cards | list | List of cards | |
| 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. Or contain-toggled to open only if there are active entities |
| title | string | "Toggle" | Dropdown title |
| title_card | card | Card to display in place of the dropdown title | |
| buttonStyle | string | "" | CSS overrides for the dropdown toggle button |
Installation
HACS
Add this repository via HACS Custom repositories
https://github.com/RossMcMillan92/lovelace-collapsable-cards
(How to add Custom Repositories)
Manually
In-depth tutorial here, otherwise follow these steps:
-
Install the
collapsable-cardscard by copyingcollapsable-cards.jsto<config directory>/www/collapsable-cards.js -
On your lovelace dashboard
- Click options
- Edit dashboard
- Click Options
- Manage resources
- Add resource
- URL: /local/collapsable-cards.js
- Resource type: JavaScript module
-
Add a custom card to your dashboard
type: 'custom:collapsable-cards'
title: Office
cards:
- type: entities
entities:
- entity: light.office_desk_led
- entity: light.office_led_strips
- entity: sensor.ross_work_laptop_is_on
show_header_toggle: false