Expander Card for HomeAssistant

Expander/Collapsible card for HomeAssistant

Introduction

First a few words to start with. A big thank you goes to @Alia5 (https://github.com/Alia5/lovelace-expander-card), who initially launched the card. I forked this card for my own HomeAssistant to make a few improvements. I give no guarantee for the functionality and no promise of lifelong maintenance, as I do the whole thing in my free time. Of course, I am happy about every contribution and PR

Demo

Expand button as overlay:

You can even nest expanders!

Clear Background (default theme):

Options

Graphical config Editor is currently not supported. Contribution welcome!

Yaml Options:

Examples

Here are a few examples of usage.

Title card

Example title card that is clickable and has 2 nested cards, which is directly expanded

    - type: custom:expander-card
      child-margin-top: 0.6em
      padding: 0
      clear: true
      title-card-button-overlay: true
      title-card-clickable: true
      expanded: true
      title-card:
        type: "custom:digital-clock"
        dateFormat:
          weekday: "long"
          day: "2-digit"
          month: "short"
        timeFormat:
          hour: "2-digit"
          minute: "2-digit"
      cards:
        - type: custom:simple-weather-card
          entity: weather.openweathermap
          primary_info:
            - wind_speed
            - wind_bearing
          secondary_info:
            - precipitation
            - precipitation_probability
        - type: custom:hourly-weather
          entity: weather.openweathermap
          icons: true
          show_precipitation_probability: true
          show_precipitation_amounts: true
          forecast_type: "hourly"
          num_segments: 10"
          label_spacing: "1"
          name: null
          show_wind: speed

Title

Example with title that is clickable and has 2 nested cards.

      - type: custom:expander-card
        child-margin-top: 0.6em
        padding: 0
        title: "Test"
        title-card-button-overlay: true
        title-card-clickable: true
        cards:
          - type: custom:simple-weather-card
            entity: weather.openweathermap
            primary_info:
              - wind_speed
              - wind_bearing
            secondary_info:
              - precipitation
              - precipitation_probability
          - type: custom:hourly-weather
            entity: weather.openweathermap
            icons: true
            show_precipitation_probability: true
            show_precipitation_amounts: true
            forecast_type: "hourly"
            num_segments: 10"
            label_spacing: "1"
            name: null
            show_wind: speed

Title with min-width-expanded

Example with title that is clickable and has 2 nested cards with are automatically expanded when the screen is more than 300px.

      - type: custom:expander-card
        child-margin-top: 0.6em
        padding: 0
        title: "Test"
        title-card-button-overlay: true
        title-card-clickable: true
        min-width-expanded: 300
        cards:
          - type: custom:simple-weather-card
            entity: weather.openweathermap
            primary_info:
              - wind_speed
              - wind_bearing
            secondary_info:
              - precipitation
              - precipitation_probability
            name: in Gärtringen
          - type: custom:hourly-weather
            entity: weather.openweathermap
            icons: true
            show_precipitation_probability: true
            show_precipitation_amounts: true
            forecast_type: "hourly"
            num_segments: 10"
            label_spacing: "1"
            show_wind: speed

Card Mod

With the help of the integration card mod, the card can be flexibly adapted. This is also possible based on the card status. A CSS class “open” or “close” is always set.

Using an example to set the background based on the status

        card_mod:
          style: |
            ha-card.open {
              background: red !important;
            }
            ha-card.close {
              background: #C8A2C8 !important;
            }

Only the background of the button

        card_mod:
          style: |
            button.open {
              background: red !important;
            }
            button.close {
              background: #C8A2C8 !important;
            }

Installation

HACS

Expander-Card is not available in HACS (Home Assistant Community Store) by default, but you can add it as custom repositories.

1. Install HACS if you don't have it already
2. Open HACS in Home Assistant
3. Add this repository (https://github.com/MelleD/lovelace-expander-card) via HACS Custom repositories (How to add Custom Repositories)

Manual

1. Download expander-card.js file from the latest release.
2. Put expander-card.js file into your config/www folder.
3. Add reference to expander-card.js in Dashboard. There's two way to do that:
   • Using UI: Settings → Dashboards → More Options icon → Resources → Add Resource → Set Url as /local/expander-card.js → Set Resource type as JavaScript Module. Note: If you do not see the Resources menu, you will need to enable Advanced Mode in your User Profile
   • Using YAML: Add following code to lovelace section.

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

     Support

Clone and create a PR to help make the card even better.

Please ⭐️ or sponsor this repo when you like it.

Sponsor ❤️