Expander (Collapsible) Card

Share your Projects! Custom Integrations
#1

Hi there and merry christmas to all!

I recently moved places and decided to integrate HomeAssistant into my new home.
However, I was shocked that there was no (good) expandable/collapsible card available, so I’ve made my own…

Demo:

Sample nested
Sample nested502×791 22.9 KB

It also supports title-cards and even to overlay the expand/collapse button over aforementioned title-card!
I do use this for Light-groups :wink:
The overlay expand-button above any title-card is the config-option that makes this card truly stand out.

Sample overlay

Full graphic editing is also supported! (Too many custom cards skimp on the ease of use…)

Sample editor
Sample editor499×553 17.9 KB

Find it here:

Let me know if you have any ideas on how to improve my first custom card further

14 Likes
Scheduler card/custom component
#2

Thanks for this! I love it!

#3

Same here! Unfortunately I have limited coding skills so I was hoping someone like you would come along some day. Will test this for sure, have lots of ways I want to implement this!

#4

Apart from expanders, a few more layout options are (imho) severely missing.
Swipable and scrolleable (horizontal and vertical) cards for example.

Let’s see what the future brings… :wink:

#5

Although there is swipe-card where you can swipe between cards (horizontal and vertical), one thing I really mis is:
a card where you can create a container with maximum height, and when the content is larger than the height of the container, you can just scroll inside. So the card itself will never exceed the height of the container, but you can scroll through the content.

1 Like
#6

Awesome work, already added it to my dashboard in two places!

Two suggestions (or questions) though:

  • Is there an option to adjust the style of the title text? I’d like to style it similarly to a card title, i.e. a few sizes bigger than normal text
  • Could it be that the expand-button is hardcoded to be white? It’s invisible on my day mode lovelace dashboard.
#7
  • Is there an option to adjust the style of the title text? I’d like to style it similarly to a card title, i.e. a few sizes bigger than normal text

Just use a markdown card as title-card and overlay the expand-button :wink:

  • Could it be that the expand-button is hardcoded to be white? It’s invisible on my day mode lovelace dashboard.

It should apply the theme-colors, but I’ll provide a config-option!
Good find!

For now, you could alter the background-color: button-background: '#mycolor'

#8

Fixed :wink:
Now looks fine in light mode, too!

#9

Oh, good point. I didn’t think about just building it myself.

And for the light mode: Thanks, I just updated and it works perfectly!

#11

Thanks for this, I love it. Just one thing, when I add a markdown as the title card, the expand/collapse arrow at the end disappears. Am I doing something wrong?
image

Also, is there a way that the markdown area can do the expand/collapse too, as well as the bit at the end, like it does if you just use title instead of title-card?

Here’s my yaml:

type: custom:expander-card
title: Sitting Room
cards:
  - type: entities
    entities:
      - entity: light.dining_table_pendants
      - entity: light.sitting_room_light_sockets
        name: Lamps
      - entity: light.sitting_room_end_downlights
        name: End downlights
      - entity: light.sitting_room_pendant
        name: Pendant
      - entity: light.sitting_room_middle_downlights
        name: Middle downlights
      - entity: light.sitting_room_nearest_downlights
        name: Nearest downlights
      - entity: switch.big_slider_sunny_evening
      - entity: switch.open_external_blinds
      - entity: switch.close_external_blinds
      - entity: switch.big_slider_sunny_day
      - entity: cover.big_slider_blind_left_action
        name: LEFT Big slider blind
      - entity: cover.big_slider_blind_right_action
        name: RIGHT Big slider blind
      - entity: input_boolean.leave_blinds_open
      - entity: cover.lounge_left
        name: Left end blind
      - entity: cover.lounge_right
        name: Right end blind
      - entity: sensor.28_b61377910402_temperature
        name: East slab sensor
      - entity: sensor.28_7eae77910802_temperature
        name: West slab sensor
      - entity: climate.sitting_kitchen
gap: '0'
padding: '0'
child-padding: '0'
title-card:
  type: markdown
  content: '**Sitting Room**'

Thank you so much!

#14

Hi Alia5, I use minimalist UI and with me the arrow/button is always displayed in tag mode still in white.
If I for example gray background, then it changes nothing.
Can you possibly help me with this? :slight_smile:

image

image
image404×523 15.7 KB 

# Luftbefeuchter
  - type: custom:expander-card
    title-card:
      type: custom:mushroom-humidifier-card
      entity: humidifier.levoit_ultrasonic_top_fill_smart_cool_mist_humidifier
      #button-background: rgba(var(--color-theme),0.2)
      button-background: rgb(51,51,51)
      show_target_humidity_control: true
      collapsible_controls: true
      fill_container: false
      layout: horizontal
      name: Luftbefeuchter
      style:
        .: |
          ha-card {
            height: 4em;
            background: none;
            box-shadow: none;
          }
    cards:
      - type: custom:stack-in-card
        mode: vertical
        cards:
          - type: entities
            entities:
              - entity: switch.levoit_ultrasonic_top_fill_smart_cool_mist_humidifier_auto_mode
              - entity: switch.levoit_ultrasonic_top_fill_smart_cool_mist_humidifier_display
              - entity: light.levoit_ultrasonic_top_fill_smart_cool_mist_humidifier_night_light
            state_color: true
            show_header_toggle: false
          - type: custom:mini-graph-card
            entities:
              - entity: sensor.levoit_ultrasonic_top_fill_smart_cool_mist_humidifier_current_humidity
                #aggregate_func: max
                name: Ist
                color: #e74c3c
              - entity: number.levoit_ultrasonic_top_fill_smart_cool_mist_humidifier_target_level
                #aggregate_func: min
                name: Soll
            name: Luftfeuchtigkeit
            hours_to_show: 24
            points_per_hour: 0.25
            height: 90
1 Like
#15

This should be definitively integrated in core HA.

Thanks for this useful card.

1 Like
#16

Nice work Alia5 !
Thanks for this.
Quick question, is there a way to “programaticaly” expand/collapse ?
What I would like is for example if the toggle “REVEIL” (wake) is on then it’s expanded, and collapsed if its off:
image
and when turned on:
image

Thanks

#17

If you want to show/hide cards based on state of an entity, you might as well just use state-switch card instead of expander.

thomasloven/lovelace-state-switch: :small_blue_diamond:Dynamically replace lovelace cards depending on occasion (github.com)

There is no point in having a collapse arrow if you want it to auto-open/collapse based on state.

#18

I just added this card to a view, and I’d love to know how to change the title color and size in card-mod.

#19

Hello I am nesting some cards inside the expander card…mushroom cards inside a horizontal stack card and I am having a problem viewing the cards on my phone. When using over a certain number of characters on the mushroom cards the mushroom card on the right runs over the expander card.

HA_Expander_Card_Setup
HA_Expander_Card_Setup2046×1292 141 KB

HA_Expander_Card
HA_Expander_Card1170×2532 112 KB

If I truncate the text on the mushroom card, then everything fits perfectly

HA_Expander_Card_Fix
HA_Expander_Card_Fix1170×1038 98.5 KB

So I wonder if there’s anything that can be done to fix that or how to prevent it from happening without basically making the text on my cards useless?

1 Like
#20

Very nice card, I love the ease…

You might consider add a “delete” card also. (next to the “add card button”)

1 Like
#21

Is this still being maintained? I love the idea, but similar to 400hpmustang, when I expand my entity card the expanded card exceeds the width of my theme.

#22

I’ve found out that when a title card is used, the color defaults to white. If you leave the title card empty, it will change to the theme color. I hope this can be fixed, because I really like this card.

1 Like
#23

I suppose that’s what I’m seeing. I’m completely unable to modify the color of the expander button or the card once it is expanded. I’d like to use it, but since the color can’t be changed now I’m looking for an alternative.