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
