Collapsible card with markup

Hi,

so I’m using collapsible cards in my HA setup. They work great. However, there is one limitation and I haven’t found a way around it. I can only insert a title in “plain text” in the collapsible card - meaning I can’t use markup language to insert information into the collapsing card. For example: I have a collapsing card that “hides” the alarm system keypad. Above it, I have a markup card that tells me (in “normal” language) whether the alarm is active, activating, or off. Ideally, this information would be displayed in the collapsing card, thus letting me expand upon the information provided in the collapsing card by expanding it.

Does this make sense? Anybody know a way around this limitation? Or am I missing something?


Thanks!

Try using a custom:fold-entity-row card with some card as a “head”.
The “head” card must be some custom:decluttering-card, and you can some decluttering-cards as “folded entities”. Or you may use custom:hui-element card instead of a decluttering-card.

Here is an example with hui-element:
Collapsed:
image

Expanded:
image

Goto the fold-entity-row corresponding thread for details, a code for this example etc.

Also, you will require some card-mod to “tune” your result.

Thanks! I’ll try this and get back to you with my result. :slight_smile:

So this sort of works. I can use the hui-element card to at least create the impression of grouping the cards together. (As in: They aren’t as separated visually, because the hui-element card creates a common “background box”.)

However: I still have the issue of needing a “useless” title text to have the drop-down for the folded entity (I don’t mean entity card, I mean “entity” as in “whatever I want to display”).

Does anybody know a work-around here?

Thanks!

perhaps to add: The fold-entity-row card only works for entities. not for other type of cards such as the alarmsystem card or buttons. However, it’s these types of things I’d like to hide. For example: Have a markup card as the title of the fold-entity-row “type of card” that says “the alarm is off” and then the ability to hit the “toggle” arrow and have the numberpad interface of the alarm system expand. (As I show on my first screenshots but without the “useless” line of “alarm system” there or even without blank space. I’d like to expand (fold) where the information is provided. Kind of like what @Ildar_Gabdullin is doing in his screenshots but not with “entities”.

Wrong. See my example. I already suggested you to go to fold-entity-row thread

Card-mod, as it was suggested.
Or use declutteribg instead of hui-element - as it was suggested too.
To remove borders/margins between cards in stack - use card-mod or stack-in-card.

I think what @plutotea is looking for would be a template-able header for the card itself. Like I use this card for remote controls for TVs in my house. I would love to have the current state (on/off) or even better current channel/program or cast if on (aka Netflix)

Like instead of a static header of “Kitchen”, a header that says “Kitchen – Netflix” or “Kitchen – Off” for the card itself and not another card above it

1 Like

Do not see any problem. Place a markdown into the “head” card, use jinjia in templates.

I explained what could be done to achieve results. Not going neither to convince anyone nor to write a whole code. Once again: use fold-entity-row with custom header & custom internal card(s); for details - go to the corresponding fold-entity-row thread = information must be gathered in one place instead of 100500 small talks.

Like:


Imagine that the header may be anything, like history-graph.

image

I may be missing something. But I did go to the thread as you advised. And it says that you can only use entity cards in the fold-row card.

Sorry , again, may be missing something and happy to look at the relevant threads again.

Also: you’re example appears to show an entity cards as the header and the content (of the drop down). That would work. I know that. :slight_smile:

Thanks!

No, it is said: “you may only use fold-entity-row INSIDE entities card”.
Means:

type: entities
entities:
  - type: fold-entity-row
    head:
      type: decluttering-card
      ...
    entities:
      - type: decluttering-card
      ...
      - type: decluttering-card
      ...

instead of:

type: some-stack
cards:
  - type: fold-entity-row
    ...

This is now possible using GitHub - RossMcMillan92/lovelace-collapsable-cards: A custom Lovelace card that hides other cards behind a dropdown toggle
with the new option title_card

example:

type: custom:collapsable-cards
title_card:
  type: history-graph
  entities:
    - entity: climate.home
    - entity: sensor.outdoor_terrace_sensor_temperature
cards:
  - type: history-graph
    entities:
      - entity: sensor.home_heating

Hi there. Thanks for the update.

I’ve tried getting it to work, but no luck. If you got a minuite, could you have a look at my code?

Working code (two “entities” for markdown + dropdown):

type: entities
entities:
  - type: custom:hui-element
    label: Alarmanlage
    card_type: vertical-stack
    cards:
      - type: markdown
        content: >-
          ## <ha-icon icon="mdi:shield"></ha-icon> Alarm



          Der Hausalarm {{ states('alarm_control_panel.home_alarm') |
          replace("armed_home","ist <b>scharf geschaltet (zu Hause)</b>.") |
          replace("disarmed", "ist <b>ausgeschaltet</b>.") | replace("arming",
          "<b>wird</b> gerade <b>scharf geschaltet</b>.") |
          replace("armed_away", "ist <b>scharf geschaltet (auswärts)</b>.") }}
      - type: custom:collapsable-cards
        title: Alarm Panel
        cards:
          - type: custom:mushroom-alarm-control-panel-card
            entity: alarm_control_panel.home_alarm
            states:
              - armed_home
              - armed_away
            name: Alarmsystem
            fill_container: false
            show_keypad: true

Code that doesn’t work (would like to have the markdown entity that shows whether the arlam is armed or not-armed to be the drop-down entity for the alarm panel):

type: custom:collapsable-cards
title_card:
  - type: markdown
    content: >-
      ## <ha-icon icon="mdi:shield"></ha-icon> Alarm
    
  
      Der Hausalarm {{ states('alarm_control_panel.home_alarm') |
      replace("armed_home","ist <b>scharf geschaltet (zu Hause)</b>.") |
      replace("disarmed", "ist <b>ausgeschaltet</b>.") | replace("arming",
      "<b>wird</b> gerade <b>scharf geschaltet</b>.") |
      replace("armed_away", "ist <b>scharf geschaltet (auswärts)</b>.") }}
cards:
  - type: custom:mushroom-alarm-control-panel-card
    entity: alarm_control_panel.home_alarm
    states:
      - armed_home
      - armed_away
    name: Alarmsystem
    fill_container: false
    show_keypad: true

I can’t attached a screenshot here, as I can save this code, but it doesn’t actually display anything.

Thanks for your help!

Look like you don’t need the - before type in the title card section.

Exactly @plutotea as eggman said, remove the “-” on the title_card.

I don’t have an alarm but your code is enough to show the basic:

Your both great!! (@antonio1475 / @eggman) Thank you so much!

Quick question though: How come the box around the drow-down element (the one always visible that you click on to reveal the second element) is so much smaller than it could be? It’s pushed all the way to the left… Is that something in my code or just the way HA is displaying this custom element? Thanks again!

Also:
In another card it now no longer displays the dropped-down entity. If I insert this card as a standalone card (not in a table/grid) it works fine. But in the grid, it doesn’t work. (This is regardles of the conditional state). Thanks again!

type: conditional
conditions:
  - entity: input_boolean.garbagemarkdownon
    state: 'on'
card:
  type: custom:collapsable-cards
  title_card:
    type: markdown
    content: |-
      ## <ha-icon icon="mdi:trash-can"></ha-icon> Müllabholung
      In den nächsten zwei Tagen wird kein Müll abgeholt.
  cards:
    - type: entities
      entities:
        - entity: sensor.restmuell
        - entity: sensor.biomuell
        - entity: sensor.wertstoff
      show_header_toggle: false
      state_color: false

Note that you can click on the whole row (the Alarm card, the gray space, the arrow,… But collapsable-cards adds some weird style for some cards, yes. You could add style to correct this, for example:

style:
  button {padding:0;}
  hui-markdown-card {width:100%}

Or even hide the arrow if you’d like, but maybe not necessary here (and there’s a native option for it, read collapsable-cards repo).

I don’t understand your other question.

Hmm somehow this isn’t working for me… but ohh well…

Stupid question: Is it possible that this “new” function of the collapsible cards uses a sh***t load of computing power? Ever since I’ve implemented this, the dashboard needs forever to load / save / do anything really…

Forgot to mention that you might need GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card to apply styles.

Regarding CPU power… could be but I’m running it on a very slow-spec mini PC and it runs fine. Try a restart when you’re set or something…

1 Like

Thanks for the help!

Seems to work for me? The only thing I changed is the condition entity to something I have (light). Also kept the style line discussed above.

Yeah it’s really weird. On some browsers (or devices) it displays the dropdown card. On others it does not. Kinda confusing.