Hi,
Inspired by browser_mod and state-switch I have created a local version of conditional card. It allows to show/hide any card without need for binary inputs or other integrations. Perfect for displaying additional options or details without messing up other users’ interface.
Available on GitHub and in HACS
esta buenisimo, consulta como puedo ocultar varias targetas de sensores y solo tener una lista?
Could you explain it in English?
A new version has been released
one word… Excellent
I was searching since several days a way to have these feature.
Now I could continue my ‘huge’ dashboard
Unfortunately after upgrading to 2023.12.1 I have noticed an issue In HA 2023.12.1 card showing camera image is not working · Issue #25 · PiotrMachowski/Home-Assistant-Lovelace-Local-Conditional-card · GitHub
First, really nice card and thanks for your work! Highly appreciated.
My post is more a request as a feedback. From my perspective, this card doesn’t match my dashboard style (unfortunately). One feature would make this card absolutely incredible. If you check custom restriction card, it adds a transparent layer over every card, while this laser acts as a switc, to toggle to lock or unlock the underlying card. So any card can be used.
I imagine a combination of the transparent layer with this local conditional card. With such an approach, we could design own cards, add them under local conditional card and the transparent layer button toggles the cards on and off. This would make this card incredible.
Thanks @Nemu!
It should be possible to toggle visibility of this card from any other card, entities card is used just as an example. You just have to set appropriate tap-action and it should work. Would this meet your expectations?
Tap action should work. Then I could use button card and create my own local dashboard tabs.
Yup, you can do it right now 
Latest HA update broke some of my cards in terms of spacing. If you have placed your cards in e.g. a grid card, all hidden cards will cause a gap. Really annoying.
I found one work around for my mini local cards, by putting the cards into a custom:vertical-stack-in-card helps to keep the spacing correct.
I am also experiencing this issue. Thank you for the work around @Nemu
@3_14 I love your card and use it extensively in my set up. Any chance you could take a look at this bug when you have time?
I have released a new version tonight (6h ago), have you checked it out?
Thanks @3_14 ! I super appreciate your work!
I just tried the new release but unfortunately, I’m still getting the spacing issue 
Here is my code:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#home'
name: Home
icon: mdi:home-automation
card_layout: normal
- type: custom:local-conditional-card
id: tab1
default: show
card:
square: false
type: grid
cards:
- type: custom:button-card
name: Main
icon: mdi:home-automation
layout: icon_name
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- tab1: show
- tab2: hide
- tab3: hide
styles:
card:
- font-size: 13px
- height: 40px
- border: 2px solid
- border-color: '#747474'
name:
- margin-left: '-40px'
- type: custom:button-card
name: Maint
icon: mdi:wrench-clock
layout: icon_name
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- tab1: hide
- tab2: show
- tab3: hide
styles:
card:
- font-size: 13px
- height: 40px
name:
- margin-left: '-40px'
- type: custom:button-card
name: Batteries
icon: mdi:battery-50
layout: icon_name
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- tab1: hide
- tab2: hide
- tab3: show
styles:
card:
- font-size: 13px
- height: 40px
name:
- margin-left: '-40px'
- type: custom:mushroom-title-card
title: Main
columns: 3
- type: custom:local-conditional-card
id: tab2
default: hide
card:
square: false
type: grid
cards:
- type: custom:button-card
name: Main
icon: mdi:home-automation
layout: icon_name
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- tab1: show
- tab2: hide
- tab3: hide
styles:
card:
- font-size: 13px
- height: 40px
name:
- margin-left: '-40px'
- type: custom:button-card
name: Maint
icon: mdi:wrench-clock
layout: icon_name
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- tab1: hide
- tab2: show
- tab3: hide
styles:
card:
- font-size: 13px
- height: 40px
- border: 2px solid
- border-color: '#747474'
name:
- margin-left: '-40px'
- type: custom:button-card
name: Batteries
icon: mdi:battery-50
layout: icon_name
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- tab1: hide
- tab2: hide
- tab3: show
styles:
card:
- font-size: 13px
- height: 40px
name:
- margin-left: '-40px'
- type: custom:mushroom-title-card
title: Maintenance
columns: 3
card_mod:
style: |
:host {
margin-top: -50px
}
- type: custom:local-conditional-card
id: tab3
default: hide
card:
square: false
type: grid
cards:
- type: custom:button-card
name: Main
icon: mdi:home-automation
layout: icon_name
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- tab1: show
- tab2: hide
- tab3: hide
styles:
card:
- font-size: 13px
- height: 40px
name:
- margin-left: '-40px'
- type: custom:button-card
name: Maint
icon: mdi:wrench-clock
layout: icon_name
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- tab1: hide
- tab2: show
- tab3: hide
styles:
card:
- font-size: 13px
- height: 40px
name:
- margin-left: '-40px'
- type: custom:button-card
name: Batteries
icon: mdi:battery-50
layout: icon_name
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- tab1: hide
- tab2: hide
- tab3: show
styles:
card:
- font-size: 13px
- height: 40px
- border: 2px solid
- border-color: '#747474'
name:
- margin-left: '-40px'
- type: custom:mushroom-title-card
title: Batteries
columns: 3
Same for me. With the latest release I just notice that the card takes longer to render, when I open the dashboard. With the previous verion the rendering was instant.
Change the vertical-stack to horizontal-stack.
class QHCard extends HTMLElement {
static instances = []; // 用于存储所有卡片实例
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.isActive = false; // 记录当前卡片的状态
}
setConfig(config) {
const root = this.shadowRoot;
if (root.lastChild) root.removeChild(root.lastChild);
const card = document.createElement('div');
card.style.backgroundColor = 'rgba(255, 255, 255, 1)';
card.style.width = '7vw';
card.style.height = '2.6vw';
card.style.borderRadius = '2vw';
card.style.display = 'flex';
card.style.justifyContent = 'center';
card.style.alignItems = 'center';
card.style.cursor = 'pointer';
card.style.transition = 'background-color 0.3s, color 0.3s';
const text = document.createElement('span');
text.innerText = config.name || 'Custom Button';
text.style.fontWeight = '800';
text.style.fontSize = '1.43vw';
text.style.color = 'rgba(1, 12, 24, 1)';
card.appendChild(text);
// 添加卡片点击事件
card.addEventListener('click', () => {
this.toggleCard(card, text);
});
root.appendChild(card);
QHCard.instances.push(this); // 将当前实例添加到静态数组中
}
toggleCard(card, text) {
this.isActive = !this.isActive; // 切换当前卡片的状态
if (this.isActive) {
card.style.backgroundColor = 'rgba(96, 96, 96, 0)';
text.style.color = 'rgba(255, 255, 255, 0.8)';
this.lockOtherCards(); // 锁定其他卡片
} else {
card.style.backgroundColor = 'rgba(255, 255, 255, 1)';
text.style.color = 'rgba(1, 12, 24, 1)';
}
}
lockOtherCards() {
QHCard.instances.forEach((instance) => {
if (instance !== this) {
const card = instance.shadowRoot.firstChild;
const text = card.querySelector('span');
card.style.backgroundColor = 'rgba(255, 255, 255, 1)';
text.style.color = 'rgba(1, 12, 24, 1)';
instance.isActive = false; // 重置其他卡片的状态
}
});
}
getCardSize() {
return 1;
}
}
customElements.define('qh-card', QHCard);
type: horizontal-stack
cards:
- type: custom:qh-card
name: Card 1
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- sun1: show
- sun2: hide
- type: custom:qh-card
name: Card 2
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- sun2: show
- sun1: hide
type: horizontal-stack
cards:
- type: custom:local-conditional-card
default: show
id: sun1
card:
entities:
- sun.sun
title: Sun 1
type: entities
- type: custom:local-conditional-card
default: hide
id: sun2
card:
entities:
- sun.sun
title: Sun 2
type: entities
Sure! Here’s the translation of your message into English:
Hello, I’m using AI ChatGPT to write an interlocking button card, but the following configuration is not working:
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- sun1: show
- sun2: hide
Do you know how to write this button card to fix the issue?
Let me know if you need further adjustments!
Here you have a working code:
- type: horizontal-stack
cards:
- name: Show 1, Hide 2
icon: mdi:weather-sunset-up
type: button
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- sun1: show
- sun2: hide
- name: Show 2, Hide 1
icon: mdi:weather-sunset-up
type: button
tap_action:
action: fire-dom-event
local_conditional_card:
action: set
ids:
- sun2: show
- sun1: hide
- type: custom:local-conditional-card
id: sun1
default: show
card:
show_name: false
show_icon: true
type: button
tap_action:
action: toggle
icon: mdi:numeric-1-box
- type: custom:local-conditional-card
id: sun2
default: hide
card:
show_name: false
show_icon: true
type: button
tap_action:
action: toggle
icon: mdi:numeric-2-box
There are phantom traces on the background
Please tell me how to solve this problem?