I tried your code works as expected and collapse on clicking the title card or the arrow.
oh thats interesting… i thought maybe it was because it was part of the entities card in that case, but even top level it doesn’t work for me. maybe it’s some kind of global setting then? ill keep investigating. thanks!
edit: well. figured it out. my own silly mistake of course. accidentally added the old expander instead of this one 
1 Like
It is possible to…
Heaving two main sections (with respective subitens). When i expand one section the other one retract by itself…
1 Like
@Melle, is it possible to have smooth transition of collapse and expansion, like a slide instead of abrupt expand and collapse. May be incorporating webkit animation. That will be make it even better.
I also needed to adjust the margins of the divider to stop overlapping the arrow:
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:bubble-card
card_type: separator
card_mod:
style: |
ha-card {
max-width: 90% !important; /* Controls entire card width */
margin-left: 0 !important; /* Keeps it left-aligned */
margin-right: auto !important; /* Prevents full-width stretching */
}
name: Ensuite Main
icon: mdi:shower-head
style:
background-color: "#eeeeee"
color: "#333333"
border-radius: 10px
padding: 8px
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
modules:
- default
sub_button:
- entity: sensor.sensor_1_hallway_humidity
show_state: true
state_background: true
show_background: true
show_last_changed: false
- entity: sensor.sensor_1_hallway_temperature
show_state: true
state_background: true
cards:
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: light.ensuite_lights_2
icon: ""
style:
background-color: "#007bff"
color: "#ffffff"
border-radius: 10px
padding: 12px
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
styles: ""
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
show_name: true
show_state: false
name: ""
use_accent_color: false
force_icon: false
show_icon: true
button_action:
tap_action:
action: more-info
double_tap_action:
action: more-info
button_type: switch
- type: custom:bubble-card
card_type: button
icon: ""
style:
background-color: "#007bff"
color: "#ffffff"
border-radius: 10px
padding: 12px
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
styles: ""
tap_action:
action: toggle
use_accent_color: false
show_state: false
double_tap_action:
action: more-info
button_action:
tap_action:
action: more-info
double_tap_action:
action: more-info
entity: light.ensuite_lights_6
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
icon: ""
style:
background-color: "#007bff"
color: "#ffffff"
border-radius: 10px
padding: 12px
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
styles: ""
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: more-info
show_name: true
show_state: false
name: ""
use_accent_color: false
force_icon: false
show_icon: true
button_action:
tap_action:
action: more-info
double_tap_action:
action: more-info
button_type: switch
entity: light.ensuite_lights_1
modules:
- default
- type: custom:bubble-card
card_type: button
icon: ""
style:
background-color: "#007bff"
color: "#ffffff"
border-radius: 10px
padding: 12px
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2)
styles: ""
tap_action:
action: toggle
use_accent_color: false
show_state: false
double_tap_action:
action: more-info
button_action:
tap_action:
action: more-info
double_tap_action:
action: more-info
entity: light.ensuite_lights_4
Yes you could play around with
and
An so far it’s using the default svelte transition:
@MelleD, sorry had to fix other HA issues.
Where is this file located, I can only see following files in the www\community\lovelace-expander-card folder
Checkout github repo change it and build it with pnpm
I’ve encountered an issue since upgrading to HA 2025.6 (and 2025.6.1). The dashboard where I use expander-card will not finish loading in a browser or the Android app.
I’ve narrowed it down to the inclusion of vertical or horizontal stacks within the expander.
For example, this works fine:
views:
- title: Home
cards:
- type: custom:expander-card
padding: 0
title-card:
type: tile
entity: light.living_room_lights
name: Living Room
cards:
- type: tile
entity: fan.living_room_ceiling_fan
name: Fan
- type: tile
entity: light.living_room_ceiling_fan_light_and_switch
name: Fan Light
But this will never finish loading:
views:
- title: Home
cards:
- type: custom:expander-card
padding: 0
title-card:
type: tile
entity: light.living_room_lights
name: Living Room
cards:
- type: horizontal-stack
cards:
- type: tile
entity: fan.living_room_ceiling_fan
name: Fan
- type: tile
entity: light.living_room_ceiling_fan_light_and_switch
name: Fan Light
Does this warrant opening an issue on GitHub?
2 Likes
I have found that using gird card causes it to hang and fail to load as well. If I remove the grid card everything seems to work
1 Like
I am seeing the same issue using the vertical stack card within the expander card. Rolled back to 2025.5.3 and it works fine.
It also weirdly causes the home button at the top to no longer function
I have the same issue with hanging. When i go to a page/dashboard with the card it hangs. I have to remove the cards from my active dashboard to have a stable system.
Looks like is related to the type of the view:
panel, sidebar and custom:grid-layout, sections,custom:masonry-layout etc. is working
See: GitHub - thomasloven/lovelace-layout-card: 🔹 Get more control over the placement of lovelace cards.
Only Masonry not. I see nor error on the console
@mkr your views is wrong you have to rename cards to sections. Then it is working
See:
Example:
---
views:
- title: Test
path: testo
badges: []
sections:
- type: custom:expander-card
padding: 0
child-margin-top: 0.6em
title-card-clickable: true
clear: true
title-card-button-overlay: true
title-card:
type: entities
entities:
- entity: sun.sun
cards:
- type: horizontal-stack
cards:
- type: entities
entities:
- entity: sun.sun
- type: entities
entities:
- entity: sun.sun
Thanks for catching that! Easy ish fix. I guess I use your card a lot, was a hour of updating to sections 
1 Like
Thank you. I rebuilt my dashboard using the sections and it all works fine now.
1 Like
Created a issue for that
Added a section for FAQ and trouble shooting of this changes with some workarounds:
Any suggestions how to get rid of the borders in expander-card?
Would like to remove both the borders you see around More… and the expander button.
- type: vertical-stack
title: Smoke Detector States
cards:
- type: entities
entities:
- entity: binary_sensor.nest_protect_hallway_smoke_status
- entity: input_button.smoke_detector_reset
name: Smoke Detector Appliance Reset
- type: custom:expander-card
cards:
- type: custom:auto-entities
card:
type: entities
filter:
include:
- entity_id: "binary_sensor.nest_protect_*_co_status"
- entity_id: "binary_sensor.nest_protect_*_smoke_status"
- entity_id: "binary_sensor.nest_protect_*_heat_status"
gap: '0'
padding: '0'
child-padding: '0'
title-card-padding: 2px
clear-children: true
button-background: '#03a3eb'
title-card:
type: markdown
content: 'More...'
card_mod:
style: |
:host {
font-size: 23px;
}
I use this code and it does what I think you want…not 100% sure which option is hiding the borders so there is more below that you probably need
(code is just an extract rather than the full card)
type: custom:expander-card
gap: 0.0em
expanded-gap: 0.6em
padding: 1em
clear: false
overlay-margin: 0.0em
child-padding: 0.0em
child-margin-top: 0.0em
button-background: transparent
expander-card-background: var(--ha-card-background,var(--card-background-color,#fff))
header-color: var(--primary-text-color,#fff)
arrow-color: var(--arrow-color,var(--primary-text-color,#fff))
expander-card-display: block
title-card-clickable: trueIt might be down to the theme, but on mine using your code above, it still has the two rings around the expander-card.