Got it working post 0.1.0, added /local/lovelace-expander-card.js to resources. I think the “lovelace” bit was the bit missing
2 Likes
where did you add that?
Click on the pencil ( right top side of your dashboard (edit dashboard), than click on 3 dots and go to manage resources, add link and it will be JavaScript module. Done
1 Like
since the update the card always takes a few seconds to load. anyone knows what´s causing this?
EDIT: fixed with the newest version
Is there a way to disable how the card collapses automatically when I click something within it?
I usually click on multiple lights, and I’m having to re-expand the card after every light select
I do not have that behavior, so it might be either a bug, or a configuration problem.
Any fix for this ?
When i try to type the title the card refreshes
@Alia5 thanks for that awesome extension.
Looks like there is an issue with longer entries in a todo list resulting in the menue disappearing:
I have a todo list in a expandable card which contains more verbose items or some with details. Outside the expandable card this is not an issue. But within the right end of the card disappears (including the the right border)
Here are screenshots with short and longer text to indicate the issue:
Hello everyone. I’m missing something easy.
How do I make the menu that pops down, do it in the foreground? It currently pops up behind everything else, in the background, on the Dashboard.
@OgRoar Your code for the expander card has to be placed below the code for everything that you want to appear behind the expander card.
Is there still a known problem with the editing mode? As soon as I go to type something in the title field the whole thing collapses and becomes un-usable. Tried uninstalling and reinstalling. Is it yaml only for now?
1 Like
Great card. Is there any way to make the expander card make it so that I can use the tap-action of the weather card (in red) to expand the card below instead of having to click the button?
I have the same issue. Basically, it shows up to be configurable and once anything is touched it defaults back into an empty yaml configuration.
This codes is showing the Title card but not expanding to show the entities?
thanks for the help!
type: custom:expander-card
expanded: false
clear-children: true
clear: true
cards: null
entities:
type: custom:auto-entities
template: >
{% for s in states.binary_sensor | selectattr('attributes.zone', 'defined')
-%}
{{-
{
'type': 'custom:multiple-entity-row',
'entity': s.entity_id,
'name': s.name,
'secondary_info': {'name':'Zone','attribute':'zone'},
'entities': [
{'attribute':'bypassed','name':'Bypassed'},
{'attribute':'low_battery','name':'Low battery'},
{'attribute':'tamper','name':'Tamper'}
],
'show_state': false,
'state_color': true
}
-}},
{%- endfor %}
sort:
method: attribute
attribute: zone
numeric: true
title-card:
type: entity
entity: sensor.alarm_partition_1_keypad
state_color: true
title-card-button-overlay: true
Is this expander card a suitable drop-in replacement for the aged and probably partly broken GitHub - RossMcMillan92/lovelace-collapsable-cards: A custom Lovelace card that hides other cards behind a dropdown toggle ?
—
Edit: Oh wow, that‘s a very inviting statement 
Hi,
I try to create a expander card for calender.
I wish title card only show next event title, time and date.
And expander atomic calendar.
I try something like that without success :
type: custom:expander-card
title: Calendar
cards:
- type: custom:atomic-calendar-revive
name: Calendar
enableModeChange: true
entities:
- entity: calendar.perso
name: Perso
maxDaysToShow: 7
color: "#3F51B5"
- entity: calendar.XxX
name: XxX
color: "#FF0000"
- entity: XxX
name: XxX
color: "#4CAF50"
defaultMode: Event
showDeclined: false
showDate: true
hideFinishedEvents: true
compactMode: false
showDescription: false
showEventIcon: false
icon: mdi:calendar-alert-outline
expanded: false
animation: true
title-card:
type: custom:button-card
icon: mdi:calendar
show_state: true
name: >
{% set calendars = ['calendar.perso','calendar.perras_thibault','calendar.idrsimmo_gmail_com'] %}
{% set now_ts = now().timestamp() %}
{% set next_event = namespace(event=None, start=None, end=None, cal=None) %}
{% for cal in calendars %}
{% set e_start = state_attr(cal, 'start_time') %}
{% set e_end = state_attr(cal, 'end_time') %}
{% set e_name = state_attr(cal, 'message') %}
{% if e_start and as_timestamp(e_start) > now_ts %}
{% if next_event.start is none or as_timestamp(e_start) < next_event.start %}
{% set next_event.event = e_name %}
{% set next_event.start = as_timestamp(e_start) %}
{% set next_event.end = as_timestamp(e_end) if e_end else None %}
{% set next_event.cal = cal %}
{% endif %}
{% endif %}
{% endfor %}
{% if next_event.event %}
{% set start_time = next_event.start | timestamp_custom('%H:%M', true) %}
{% set end_time = next_event.end | timestamp_custom('%H:%M', true) if next_event.end else '' %}
{{ start_time }}{% if end_time %} - {{ end_time }}{% endif %} : {{ next_event.event }}
{% else %}
Aucun événement prochain
{% endif %}
color_type: card
tap_action:
action: navigate
navigation_path: /calendar
styles:
card:
- background-color: >
{% set calendars = {
'calendar.perso':'#3F51B5',
'calendar.perras_thibault':'#FF0000',
'calendar.idrsimmo_gmail_com':'#4CAF50'
} %}
{% set now_ts = now().timestamp() %}
{% set next_event_cal = none %}
{% for cal, color in calendars.items() %}
{% set e_start = state_attr(cal, 'start_time') %}
{% if e_start and as_timestamp(e_start) > now_ts %}
{% if next_event_cal is none or as_timestamp(e_start) < as_timestamp(state_attr(next_event_cal, 'start_time')) %}
{% set next_event_cal = cal %}
{% endif %}
{% endif %}
{% endfor %}
{% if next_event_cal %}
{{ calendars[next_event_cal] }}
{% else %}
white
{% endif %}
- animation: >
{% set calendars = ['calendar.perso','calendar.perras_thibault','calendar.idrsimmo_gmail_com'] %}
{% set today = now().date() | string %}
{% set tomorrow = (now().date() + timedelta(days=1)) | string %}
{% for cal in calendars %}
{% set next_event = state_attr(cal, 'start_time') %}
{% if next_event is not none %}
{% set event_date = as_timestamp(next_event) | timestamp_custom('%Y-%m-%d', true) %}
{% if event_date == today or event_date == tomorrow %}
calendar-clock 2s linear infinite
{% endif %}
{% endif %}
{% endfor %}
none
icon:
- animation: >
{% set calendars = ['calendar.perso','calendar.perras_thibault','calendar.idrsimmo_gmail_com'] %}
{% set today = now().date() | string %}
{% set tomorrow = (now().date() + timedelta(days=1)) | string %}
{% for cal in calendars %}
{% set next_event = state_attr(cal, 'start_time') %}
{% if next_event is not none %}
{% set event_date = as_timestamp(next_event) | timestamp_custom('%Y-%m-%d', true) %}
{% if event_date == today or event_date == tomorrow %}
calendar-clock 2s linear infinite
{% endif %}
{% endif %}
{% endfor %}
none
Do you have example ?
My pictures above
type: custom:bubble-card
card_type: calendar
event_action:
tap_action:
action: navigate
navigation_path: "#calendars"
double_tap_action:
action: none
hold_action:
action: none
entities:
- entity: my_calendar
color: teal
show_progress: true
show_place: true
show_end: true
limit: 4
sub_button: []
rows: "2"
style:
justify-content: flex-start
flex-wrap: wrap
font-size: 1.1em
line-height: 1.2em
width: 100%
tap_action:
action: navigate
navigation_path: "#calendars"
styles: |-
ha-card {
--bubble-main-background-color: none !important;
#--bubble-calendar-icon-background-color: none !important;
}
modules:
- icon_color
- icon_container_color
icon_container_color:
color: black
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: “#calendars” - entities:
-
icon: “”
accent_color: “#ff6347” -
entity: calendar.my_calendar
name: My Calendar
color: pink
accent_color: teal -
entity: calendar.family
name: Family -
entity: calendar.my_calendar
name: My Calendar -
entity: calendar.birthdays
name: Events
color: cherry -
entity: calendar.holidays_in_united_states
name: Holidays
days_to_show: 4
compact_days_to_show: 4
compact_events_complete_days: true
filter_duplicates: true
split_multiday_events: true
title:
Calendar
title_font_size: 24px
title_color: “#baf1ff”
day_separator_width: 1px
day_separator_color: “#03a9f430”
week_separator_width: 2px
week_separator_color: “#03a9f480”
month_separator_width: 3px
month_separator_color: “#03a9f4”
today_indicator: pulse
today_indicator_size: 10px
weekday_color: “#baf1ff”
day_color: “#baf1ff”
month_color: “#baf1ff”
show_single_allday_time: false
time_24h: false
time_color: teal
time_icon_size: 18px
remove_location_country: true
location_color: “#baf1ff”
location_icon_size: 12px
weather:
entity: weather.combined
position: event
event:
icon_size: 20px
font_size: 20px
color: white
tap_action:
action: expand
refresh_on_navigate: false
type: custom:calendar-card-pro
weekend_font_size: 14px
weekend_color: pink
card_mod:
style: |
/* Make today’s events stand out /
.day-table.today .event-title {
font-size: 16px !important; / Larger text /
font-weight: bold !important; / Bold text /
color: var(–accent-color) !important; / Use theme accent color */
}/* Add subtle left border pulse animation */
.day-table.today .event {
border-left-width: 4px !important;
transition: border-left-color 1s ease-in-out;
animation: todayPulse 3s infinite alternate;
}@keyframes todayPulse {
from { border-left-color: var(–accent-color); }
to { border-left-color: var(–primary-color); }
}
ha-card {
–ha-card-background: none;
}
ha-card .header-container h1.card-header {
width: 100%;
text-align: center;
font-weight: bold;
border-bottom: 1px solid var(–primary-color);
float: none !important; /* Override the default float:left */
}
-
1 Like
I think about code.
But I have this :
type: custom:expander-card
expanded: false
animation: true
title-card:
type: custom:mushroom-template-card
icon: mdi:calendar
primary: >
{% set calendars =
['calendar.perso','calendar.XxX','calendar.XxX']
%} {% set names =
{'calendar.perso':'Perso','calendar.XxX':'XxX
XxX','calendar.XxX':'XxX'} %} {% set now_ts =
now().timestamp() %} {% set next_event = namespace(event=None, start=None,
end=None, cal=None) %} {% for cal in calendars %}
{% set e_start = state_attr(cal, 'start_time') %}
{% set e_end = state_attr(cal, 'end_time') %}
{% set e_name = state_attr(cal, 'message') %}
{% if e_start and as_timestamp(e_start) > now_ts %}
{% if next_event.start is none or as_timestamp(e_start) < next_event.start %}
{% set next_event.event = e_name %}
{% set next_event.start = as_timestamp(e_start) %}
{% set next_event.end = as_timestamp(e_end) if e_end else None %}
{% set next_event.cal = cal %}
{% endif %}
{% endif %}
{% endfor %} {% if next_event.event %}
{% set start_time = next_event.start | timestamp_custom('%H:%M', true) %}
{% set end_time = next_event.end | timestamp_custom('%H:%M', true) if next_event.end else '' %}
{{ names[next_event.cal] }}: {{ start_time }}{% if end_time %} - {{ end_time }}{% endif %} : {{ next_event.event }}
{% else %}
Aucun événement prochain
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Calendrier
content:
type: calendar
initial_view: listWeek
entities:
- calendar.perso
- calendar.XxX
- calendar.XxX
card_mod:
style: |
ha-icon {
{% set calendars = ['calendar.perso','calendar.XxX','calendar.XxX'] %}
{% set today = now().date() | string %}
{% set tomorrow = (now().date() + timedelta(days=1)) | string %}
{% for cal in calendars %}
{% set next_event = state_attr(cal, 'start_time') %}
{% if next_event is not none %}
{% set event_date = as_timestamp(next_event) | timestamp_custom('%Y-%m-%d', true) %}
{% if event_date == today or event_date == tomorrow %}
animation: calendar-clock 1.5s linear infinite;
{% endif %}
{% endif %}
{% endfor %}
}
ha-card > .content > .primary {
{% set colors = {'calendar.perso':'#3F51B5','calendar.XxX':'#FF0000','calendar.XxX':'#4CAF50'} %}
{% set now_ts = now().timestamp() %}
{% set next_event_cal = none %}
{% for cal, color in colors.items() %}
{% set e_start = state_attr(cal, 'start_time') %}
{% if e_start and as_timestamp(e_start) > now_ts %}
{% if next_event_cal is none or as_timestamp(e_start) < as_timestamp(state_attr(next_event_cal, 'start_time')) %}
{% set next_event_cal = cal %}
{% endif %}
{% endif %}
{% endfor %}
{% if next_event_cal %}
color: {{ colors[next_event_cal] }};
{% else %}
color: black;
{% endif %}
font-weight: bold;
}
@keyframes calendar-clock {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
cards:
- type: custom:atomic-calendar-revive
name: Calendar
enableModeChange: true
entities:
- entity: calendar.perso
name: Perso
maxDaysToShow: 7
color: "#3F51B5"
- entity: calendar.XxX
name: XxX XxX
color: "#FF0000"
- entity: calendar.XxX
name: [email protected]
color: "#4CAF50"
defaultMode: Event
showDeclined: false
showDate: true
hideFinishedEvents: true
compactMode: false
showDescription: false
showEventIcon: false
Who works.
I trie to animate icon and make text color depend on which calender event is.
