You can modify the colour of the expander button:
button-background: '#03a3eb'
Replace the colour with any hex colour you wish.
use layout-card and set your width then add your card under that.
Yes… but only the button. Not the card background, the font color, etc.
I see. If you find an alternative then let me know please.
My wife and I have different size phones, won’t setting the width with the layout-card mean we have to pick the lowest width between our phones?
Or can you still retain some dynamic width so it maximizes the screen real estate on both phones?
@nicesocks If you set the width then yes, you would have to pick the lowest, but you can also decide to customise the view for each device. Its a bit more complicated but doable based on the dashboards users can access.
@Alia5 This is fantastic and a perfect solution to my excess scrolling problems, thanks!
Question, how did you get these little temp/pressure details on the bottom of your demo title card?
Edit: ah it’s a mushroom ‘chips’ card. Nice.
1 Like
Anyone know how if it’s possible have this default expanded differently on desktop vs. mobile?
Create a different dashboard for mobile users.
Then hide specific dashboard tabs for mobile users.
sorry, i should have specified: I already have two different dashboards - one for desktop, another for mobile. They reference the same card in yaml so that i only have to go to one place to edit it. The only thing different, is that i want it to appear expanded on mobile as default, and collapsed on desktop as default.
The card only has expanded: false (or true) as an option.
How do you reference these? 
Can’t you just skip that point in your template and set it in two different ways?
Both the desktop dashboard and mobile yaml reference the same card yaml file (so I only have to edit in one place). If there’s a way to put in a break at a certain point, so that one is expanded on mobile, I’m not sure how to do that. (That’s why I’m here talkin’ to you! 
Than show us the code you’re using, and we can see what we can do.
Here you go!
#-------------------------------------------------------------------------------
# ROOM HEADER (CARD HEADER)
#-------------------------------------------------------------------------------
type: custom:expander-card
gap: 1em
padding: 0em
clear: false
expanded: true #damn this thing! this is where I could use the desktop option to be false
title: Exterior
overlay-margin: 1em
child-padding: 0.5em
button-background: transparent
title-card-button-overlay: true
title-card:
#-------------------------------------------------------------------------------
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Exterior
icon: mdi:border-outside
icon_color: |-
{% if states.light|selectattr('entity_id','in',area_entities('exterior')+area_entities('back yard'))|selectattr('state','eq','on')|map(attribute='entity_id') | reject('is_hidden_entity')| list |count +
states.binary_sensor|selectattr('entity_id','in',area_entities('back_yard'))|selectattr('state','eq','on')|rejectattr("attributes.device_class", "eq", "motion")|map(attribute='entity_id')| reject('is_hidden_entity')| list |count > 0 %}
orange
{% else %}
blue
{% endif %}
layout: horizontal
secondary: >-
{{states.light|selectattr('entity_id','in',area_entities('exterior')+area_entities('back_yard'))|selectattr('state','eq','on')|map(attribute='entity_id') | list |count}}
device(s) on
tap_action:
action: more-info
double_tap_action:
action: call-service
service: script.proportional_light_toggle
data:
area_name: exterior
#-------------------------------------------------------------------------------
# INDIVIDUAL DEVICES IN THE AREA (DEVICES WITHIN THE CARD BODY EXPANDED)
#-------------------------------------------------------------------------------
cards:
- type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-light-card
entity: light.soffit_lights
name: Soffit Lights
icon: mdi:wall-sconce-flat
icon_color: yellow
fill_container: false
use_light_color: true
collapsible_controls: false
- type: custom:mushroom-light-card
entity: light.porch_lights
name: Porch Light
icon: mdi:outdoor-lamp
icon_color: yellow
fill_container: false
use_light_color: true
collapsible_controls: false
- type: custom:mushroom-light-card
entity: light.window_leds
name: Window LEDs
icon: mdi:wall-sconce-round
icon_color: yellow
fill_container: false
use_light_color: true
collapsible_controls: falseNot sure, is this the decluttering-card? If so, use a variable to set your expanded: true in the view, not in the configuration of the decluttering-card.
If not, have you tried decluttering-card? That should work for what you want to achieve.
It’s not the decluttering card…I will look into this solution though. might work. thank you.
Just came across this card, it’s just what I needed.
The only problem I’m having is that (as mentioned before) the chevron is always white with a title card. I’ve fixed it for now by using a grey button-background, however in the expanded state the background color is transparant (on my iPhone in the HA app). In the browser the background fades to transparent when the mouse hovers over the button, in expanded mode the background color works fine.
@Alia5 I would love to see a black chevron in the light theme.
Hey hey,
Is anyone having issues on the iphone 12 mini? I don’t see an expander arrow on the iPhone 12 mini.
On the other devices I see the arrows without problems.
Thanks
Hi there, I love this Expander card and its great that you can overlay the expand button over other cards.
This gives great flexibility for the styling of the expansion header.
I just wonder if there is a way to expand/collapse the card when the title card is tapped (not just the arrow overlay)?
So is there a service that can be fired by a tap-action or any internal property that can be accessed directly from the title card (although not sure how to change that based on a standard tap action)
Eventually a new card property might be working to make the Expander card configurable to listen on tab/hold/double_tap actions of the title card to toggle itself?
3 Likes
Please consider giving the standard card title, a class of card-header so it can be targeted by themes easily.