Nice! Would be nice to be able to edit the cards in yaml. 
i am looking for this too. this would much more intuitive on tablets and phones if you can just click the title card and it gets expanded automatically and de-expands if you tap it again.
is this maybe already possible somehow @Alia5 ?
Great card. I would like to hide the card borders. Tried card-mod, but didn’t get it working. It would be great if someone can give e an example how to define card-mod for this card. Hoped there would be simple config option to hide card borders
type: custom:stack-in-card
cards:
- type: custom:expander-card
gap: 1em
padding: 0em
clear: false
expanded: false
overlay-margin: 1em
child-padding: 0.5em
button-background: transparent
title-card-button-overlay: true
title-card:
type: vertical-stack
cards:
- type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-light-card
entity: light.ifan03_light
secondary_info: last-changed
card_mod:
style: |
ha-card {
background: transparent;
background-size: cover;
}
- type: custom:mushroom-light-card
entity: light.dining_room
secondary_info: last-changed
show_brightness_control: true
collapsible_controls: true
card_mod:
style: |
ha-card {
background: transparent;
background-size: cover;
}
1 Like
If you also want to get rid of gaps between cards as shown in the image of @cyberumb15 example below, you can use the stack-in-card and tweak the settings of the Stack in card, especially the margin for the cards used in stack-in-card should be false:
type: custom:stack-in-card
keep:
background: false
box_shadow: true
margin: false
border_radius: true
cards:
1 Like
This works for me, both with a title card and content cards:
style: |
ha-card {
border: 0px !important;
}
So is this being maintained anymore? It’s basically unusable in visual editor.
1 Like
Yea have to edit in YAML only
Really hoping the developers push a fix, as my dashboards are largely built on expander cards
hi im having problem when I try to edit card it keeps moving so don’t have time to edit can you help thanks
1 Like
I do not think this will be getting anymore updates.
1 Like
Damn, I just found this today, too.
same, RIP. i really liked this.
Seems like there a multiple forks about. Latest fork here which was updated last month.
Hopefully, the dev keeps updating it.
I’ve just run into the same issue, it actually keeps copy-pasting itself onto whatever you navigate to. It only acts like this when you have the Title Card replaced with any sort of entity though.
1 Like
Like others, I would really like to open an expander by clicking on the title card. Collapsable-cards [sic] has this, but it slowed my page loading too much. BTW, an alternate approach is to let the user set the width of the downarrow / chevron to 100%. With an overlay and transparent background, that would work in instances where the title card is not otherwise actionable.
Is there a fork that is being maintained going forward?
If, like me, you use many expander cards and are impatient to click on the title, here is a klugy work-around until a better coder takes over expander card.
I assume you have Studio Code Server, which can be downloaded with Addons, reachable either through HACS or Settings.
In Studio Code Server, in the Explorer column, right-click on www and choose New File. Name your new file expander2-card.js. Then open www/community/expander-card and click on expander-card.js. Select the entire contents of the file (Ctrl-A) and then copy (Ctrl-C) and paste into expander2-card.js (Ctrl-V). You can now close expander-card.js.
Open configuration.yaml and add the last line of:
frontend:
themes: !include_dir_merge_named themes
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
- /expander2-card.js
Note that you should already have a frontend: line with themes, but you may not have an extra_module_url. If you don’t add the last two lines. You may have other extra modules.
frontend:
themes: !include_dir_merge_named themes
extra_module_url:
- /expander2-card.js
This makes a new card, expander2-card, available to HA.
Now return to expander2-card.js. This is a large file with no carriage returns in it. So the straightforward thing to do is make some substitutions, which is done with Ctrl-H. There are five of them. A => B means search for A and replace with B. It may take the file some time to load in Studio Code.
xpander => xpander2
active{background-color:#ffffff25; => active{background-color:#00ffff99;
background:#ffffff12 => background:#ff00ff99
header-overlay{position:absolute;top:0;right:0; =>
header-overlay{position:absolute;top:0;right:0;width:97%;
.title-card-header-overlay{display:block} =>
.title-card-header-overlay{display:block;align-items:end;text-align:right}
The first substitution just renames all the instances of expander to expander2 so that the new card doesn’t conflict with the old card. The second and third make the overlay light up when moused over; these two are optional.
The fourth substitution makes the width of the overlay 97% of the available space, which covers the title card header. This is the key change.
I can’t figure out how to change the color of the carat (chevron) or its location and it is all the way left, conflicting with the title. So I shoved the title to the right, which is what the fifth substitution does.
After making the substitutions, save the file (Ctril-S) and then clear your browser cache. (To do this on mobile, you have to go into apps in settings and clear cache. In Chrome, it is in the 3 vertical dots menu, clear browsing data.)
The only thing left to do is change the card type from expander-card to expander2-card in your dashboard. You need
Here is my main page. When I hover over a title, it turns pink and is clickable, toggling the visibility of the cards.
BTW I found where to change the color of the chevron / arrow. If you add
color:#ff0000;
to
.ripple{background-position:center;
to get
.ripple{color:#ff0000;background-position:center;
it turns the chevron red. Adding alignment to this element doesn’t move the chevron, and I tried
align-items:end; text-align:right;
but still haven’t found how to move the chevron to the right.
Damn that sucks. My dashboard heavily relies on this, so ive just been using YAML. Hopefully there is a fork that continues to receive updates
1 Like
Maybe it helps anyone here how I solved this:
I created a boolean helper with a name that I can easily reuse:
My dashboard contains a toggle and a conditional card in a vertical stack:
type: vertical-stack
cards:
- type: tile
entity: input_boolean.dash_expander_temperature
tap_action:
action: toggle
- type: conditional
conditions:
- condition: state
entity: input_boolean.dash_expander_temperature
state: 'on'
card:
type: entity
entity: sensor.balkon_sensor_temperature
Style to your liking.
Open (true):
Closed (false):
2 Likes
Very nice, thanks! I have eliminated collapsible expander cards in favor of your solution, which works great, is easily styled with card_mod, and readily nests so that I have a single bin of rarely used entities, divided into five groups. What is nice about this is that if you open one of the sub-bins, and then close the top bin, the sub-bin disappears, but if you open the top bin, the previously opened sub-bin is still open.
It would be useful to replace On/Off with Open/Close, but that is a quibble.