[JS+Editor Module] Bubble Accordion

[ken-hacs-2025]

Bubble Accordion

Version: 1.2.0
Creator: ken-hacs-2025

Important

Supported cards:

• Button
• Calendar
• Climate
• Cover
• Media Player
• Select
• Separator

Bubble Accordion is an accordion-style animation module. It smoothly expands and collapses cards based on URL hash values, and controls the display of sub-buttons. Animation speed and collapsed width are customizable. It is designed to work without breaking the layout in Liquid Glass and can be used even if Liquid Glass is not enabled.

This YAML is an example of a parent card.

type: custom:bubble-card
card_type: button
button_type: name
sub_button:
  - name: open
    icon: mdi:chevron-down
    tap_action:
      action: navigate
      navigation_path: "#bubble_card_open"
  - name: close
    icon: mdi:chevron-up
    tap_action:
      action: navigate
      navigation_path: "#"
styles: |
  .bubble-background {
    background: rgba(0,0,0,0);
  } .bubble-sub-button-1 {
    display:
      ${location.hash === '#bubble_card_open' ? 'none' : ''};
  } .bubble-sub-button-2 {
    display:
      ${location.hash === '#bubble_card_open' ? '' : 'none'};
  }

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

bubble_accordion:
    name: "Bubble Accordion"
    version: "1.2.0"
    creator: " ken-hacs-2025"
    link: "https://github.com/Clooos/Bubble-Card/discussions/1818"

    supported:
        - button
        - calendar
        - climate
        - cover
        - media-player
        - select
        - separator

    description: |
        Bubble Accordion is an accordion-style animation module. It smoothly expands and collapses cards based on URL hash values, and controls the display of sub-buttons. Animation speed and collapsed width are customizable. It is designed to work without breaking the layout in Liquid Glass and can be used even if Liquid Glass is not enabled.
        
        This YAML is an example of a parent card.
        <br><br>
        <code-block><pre>
        type: custom:bubble-card
        card_type: button
        button_type: name
        sub_button:
          - name: open
            icon: mdi:chevron-down
            tap_action:
              action: navigate
              navigation_path: "#bubble_card_open"
          - name: close
            icon: mdi:chevron-up
            tap_action:
              action: navigate
              navigation_path: "#"
        styles: |
          .bubble-background {
            background: rgba(0,0,0,0);
          } .bubble-sub-button-1 {
            display:
              ${location.hash === '#bubble_card_open' ? 'none' : ''};
          } .bubble-sub-button-2 {
            display:
              ${location.hash === '#bubble_card_open' ? '' : 'none'};
          }
        </pre></code-block>
        
        <br><br>
        <code-block><pre>
        bubble_accordion: 
            hash_name: YOUR_VALUE
        </pre></code-block>

    code: |
        :host {
          position: relative;
        }
        .bubble-day-wrapper {
          display: flex;
          justify-content: left;
          align-items: center;
        }
        :host(.select-styles) .bubble-buttons-container {
          position: relative;
          display: none;
        }
        .bubble-sub-button-container {
          position: relative;
          display: none;
        }
        
        ${(() => {
          const card = this;
          const hashName = this.config.bubble_accordion?.hash_name || '#bubble_card_open';
          const subButtonLayout = this.config.bubble_accordion?.sub_button_layout || 'flex';
          const openDuration = this.config.bubble_accordion?.open_duration || 800;
          const closeDuration = this.config.bubble_accordion?.close_duration || 800;
          const subButtonDuration = this.config.bubble_accordion?.sub_button_duration || 300;
          const openDurationSec = openDuration / 1000;
          const closeDurationSec = closeDuration / 1000;
          const subButtonDurationSec = subButtonDuration / 1000;
          const openDelaySec = openDurationSec + 0.05;
          const closeDelaySec = subButtonDurationSec + 0.05;
          const collapsedWidth = this.config.bubble_accordion?.collapsed_width || 58;
          const isSelect = this.config.card_type === "select";
        
          if (!card._elementsCache) {
            card._elementsCache = {
              subButtonContainer: card.shadowRoot.querySelector(".bubble-sub-button-container"),
              bubbleButtonsContainer: card.shadowRoot.querySelector(".bubble-buttons-container"),
              dropdownArrow: card.shadowRoot.querySelector(".bubble-dropdown-arrow")
            };
          }
          const { subButtonContainer, bubbleButtonsContainer } = card._elementsCache;
        
          if (!card._didInitSelectCheck) {
            card._didInitSelectCheck = true;
            if (isSelect) {
              card.classList.add("select-styles");
            } else {
              card.classList.remove("select-styles");
            }
          }
        
          if (card._isOpen === undefined) card._isOpen = false;
        
          const getHuiCard = () => {
            let parent = card.parentElement;
            while (parent && parent.tagName !== 'HUI-CARD') {
              parent = parent.parentElement;
            }
            return parent;
          };
        
          const initializeHuiCard = () => {
            const huiCard = getHuiCard();
            if (huiCard && !card._isOpen) {
              huiCard.style.display = 'none';
            }
          };
        
          initializeHuiCard();
        
          const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
        
          const showCard = async () => {
            if (card._isOpen) return;
            card._isOpen = true;
            
            const huiCard = getHuiCard();
            if (huiCard) {
              huiCard.style.display = '';
            }
            
            card.style.display = `block`;
            card.style.animation = `open ${openDurationSec}s ease 0s forwards`;
        
            await delay(openDuration + 100);
            
            if (!card._isOpen) return;
        
            if (subButtonContainer) {
              subButtonContainer.style.display = subButtonLayout;
              subButtonContainer.style.animation = `sub-button-fade-in ${subButtonDurationSec}s ease 0s forwards`;
            }
            if (bubbleButtonsContainer) {
              if (isSelect) {
                bubbleButtonsContainer.style.display = `flex`;
                bubbleButtonsContainer.style.position = ``;
              }
              bubbleButtonsContainer.style.animation = `sub-button-fade-in ${subButtonDurationSec}s ease 0s forwards`;
            }
        
            await delay(subButtonDuration + 50);
            
            if (!card._isOpen) return;
        
            card.style.animation = `none`;
            if (subButtonContainer) subButtonContainer.style.animation = `none`;
            if (isSelect) bubbleButtonsContainer.style.animation = `none`;
          };
        
          const hideCard = async () => {
            if (!card._isOpen) return;
            card._isOpen = false;
        
            if (subButtonContainer) subButtonContainer.style.animation = `sub-button-fade-out ${subButtonDurationSec}s ease 0s forwards`;
            if (bubbleButtonsContainer) bubbleButtonsContainer.style.animation = `sub-button-fade-out ${subButtonDurationSec}s ease 0s forwards`;
        
            await delay(subButtonDuration + 50);
            
            if (card._isOpen) return;
        
            if (subButtonContainer) {
              subButtonContainer.style.animation = `none`;
              subButtonContainer.style.display = `none`;
            }
            if (isSelect) {
              bubbleButtonsContainer.style.display = `none`;
              bubbleButtonsContainer.style.animation = `none`;
            }
        
            await delay(50);
            
            if (card._isOpen) return;
            
            card.style.animation = `close ${closeDurationSec}s ease 0s forwards`;
        
            await delay(closeDuration + 100);
            
            if (card._isOpen) return;
        
            card.style.display = `none`;
            card.style.animation = `none`;
            
            const huiCard = getHuiCard();
            if (huiCard) {
              huiCard.style.display = 'none';
            }
          };
        
          const update = () => {
            if (location.hash === hashName) {
              showCard();
            } else {
              hideCard();
            }
          };
        
          update();
        
          if (!card._listenerAdded) {
            window.addEventListener('hashchange', update, { passive: true });
            window.addEventListener('popstate', update, { passive: true });
        
            if (!window._bubbleCardFastWatcher) {
              window._bubbleCardFastWatcher = true;
              let lastHash = location.hash;
              let isChecking = false;
        
              const fastCheck = () => {
                if (isChecking) return;
                isChecking = true;
        
                const currentHash = location.hash;
                if (currentHash !== lastHash) {
                  lastHash = currentHash;
        
                  document.querySelectorAll('[class*="bubble"]').forEach(el => {
                    if (el.shadowRoot && el._isOpen !== undefined && el.config?.bubble_accordion?.hash_name) {
                      const targetHash = el.config.bubble_accordion.hash_name;
                      if (currentHash === targetHash) {
                        if (!el._isOpen) el.dispatchEvent(new CustomEvent('quickopen'));
                      } else {
                        if (el._isOpen) el.dispatchEvent(new CustomEvent('quickclose'));
                      }
                    }
                  });
                }
                isChecking = false;
              };
        
              setInterval(fastCheck, 50);
            }
        
            card.addEventListener('quickopen', showCard, { passive: true });
            card.addEventListener('quickclose', hideCard, { passive: true });
            card._listenerAdded = true;
          }
        
          return `
            @keyframes open {
              0%   { width: ${collapsedWidth}px; height: 0; margin-top: -8px; margin-left: calc(100% - ${collapsedWidth}px); }
              20%  { width: ${collapsedWidth}px; height: 100%; margin-top: 0; margin-left: calc(100% - ${collapsedWidth}px); }
              50%  { width: ${collapsedWidth}px; height: 100%; margin-top: 0; margin-left: calc(100% - ${collapsedWidth}px); }
              100% { width: 100%; height: 100%; margin-top: 0; margin-left: 0; }
            }
            @keyframes close {
              0%   { width: 100%; height: 100%; margin-top: 0; margin-left: 0; }
              50%  { width: ${collapsedWidth}px; height: 100%; margin-top: 0; margin-left: calc(100% - ${collapsedWidth}px); }
              80%  { width: ${collapsedWidth}px; height: 100%; margin-top: 0; margin-left: calc(100% - ${collapsedWidth}px); }
              100% { width: ${collapsedWidth}px; height: 0; margin-top: -8px; margin-left: calc(100% - ${collapsedWidth}px); }
            }
            @keyframes sub-button-fade-in {
              from { filter: opacity(0); }
              to { filter: opacity(1); }
            }
            @keyframes sub-button-fade-out {
              from { filter: opacity(1); }
              to { filter: opacity(0); }
            }
          `;
        })()}
        

    editor:
      - name: hash_name
        type: string
        label: null
        selector:
          text: {}
        default: '#bubble_card_open'
      - name: open_duration
        label: Open duration
        selector:
          number:
            min: 1
            max: 2000
            unit_of_measurement: ms
            mode: slider
        default: 800
        description: ''
      - name: close_duration
        label: Close duration
        selector:
          number:
            min: 1
            max: 2000
            unit_of_measurement: ms
            mode: slider
        default: 800
        description: ''
      - name: sub_button_duration
        label: Sub Button duration
        selector:
          number:
            min: 1
            max: 2000
            unit_of_measurement: ms
            mode: slider
        default: 300
        description: ''
      - name: collapsed_width
        label: Collapsed width
        selector:
          number:
            min: 1
            max: 100
            unit_of_measurement: px
            mode: slider
        default: 58
        description: ''
      - name: sub_button_layout
        label: Sub Button Layout
        selector:
          select:
            options:
              - label: Flex
                value: flex
              - label: Grid
                value: grid
              - label: Block
                value: block
              - label: Auto
                value: ''
            multiple: false
            custom_value: false
            mode: dropdown
      

---

Screenshot:

[dproshek]

This looks awesome. I installed the module but it is not clear how to get it to function? Applying the module to a card just makes it disappear meaning its unclickable. If I can't even see it I cant call a hash. How did you get the function working like you show in your "screenshot"?

[ken-hacs-2025]

Glad you like it! Please make sure to paste the code from the top of this page to create the parent card first. Then apply the module only to the child card (not the parent card), and it will work like in the screenshot.

[dproshek]

Creating the parent card did work thank you. However, if I change the # value from anything other than the default "bubble_card_open" inside of the parent card and the child cards modules, it breaks and nothing will happen. Is this a known limitation or am I missing a configuration?

[dproshek]

ScreenRecording_09-10-2025.10-47-48_1.mov

On the companion app there is no animation and it is very delayed.

[ken-hacs-2025]

To change the hash value, you need to edit the parent card in these three places and make sure that the same hash value is used consistently in the child cards as well:

type: custom:bubble-card
card_type: button
button_type: name
sub_button:
  - name: open
    icon: mdi:chevron-down
    tap_action:
      action: navigate
      navigation_path: "#bubble_card_open"　# <--- Modify this hash value
  - name: close
    icon: mdi:chevron-up
    tap_action:
      action: navigate
      navigation_path: "#"
styles: |
  .bubble-background {
    background: rgba(0,0,0,0);
  } .bubble-sub-button-1 {
    display:
      ${location.hash === '#bubble_card_open' ? 'none' : ''};　# <--- Modify this hash value
  } .bubble-sub-button-2 {
    display:
      ${location.hash === '#bubble_card_open' ? '' : 'none'};　# <--- Modify this hash value
  }

The key is that the hash value must match in all three places for the card to work correctly.

[lpt2007]

Hi,

Module not working correct if inside layout-card. Can you please check.

not_colapse.mp4

thx in advace

[lpt2007]

I figured out by my self:) If inside layout-card I must use grid. Now I have only one problem when column expands, gap expands twice?

gap_problem.mp4

[ken-hacs-2025]

Hi @lpt2007,

I’m sorry I couldn’t reproduce the issue you reported.

I’ve updated the module so that the entire parent card is hidden when collapsed. This should help prevent the extra gap you mentioned.

Could you try it and see if it resolves the issue?

[eric1905]

How can I use 2 accordion buttons in one vertical-stack?
In my code only the first accordion button is working. But it does also expend the child bubble card of the second accordion button.
When I click on the second accordion button, nothing happens.

I also noticed a huge gap, when there are more than 1 child elements. In this example "Obergeschoss" has four child bubble cards:

[ken-hacs-2025]

I’ve made adjustments to remove the empty space. The behavior might still be a little unstable at times, but I’m working on improving it.
The issue with the second button should be resolved if you update all three settings of the parent card. Please give it a try and see if it works for you.
For more details, you can also check: #1818 (reply in thread)

[eric1905]

@ken-hacs-2025 my code looks like this but this is not working. I already updated all three settings in my opinion:

type: vertical-stack
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: switch
    entity: light.gruppe_studio
    name: Studio
    icon: mdi:home-roof
    sub_button:
      - icon: mdi:air-conditioner
        entity: climate.dg_studio_klimaanlage_dg_studio_klimaanlage
        select_attribute: hvac_modes
      - name: open
        icon: mdi:chevron-down
        tap_action:
          action: navigate
          navigation_path: "#studio_open"
      - name: close
        icon: mdi:chevron-up
        tap_action:
          action: navigate
          navigation_path: "#"
    styles: |
      .bubble-background {
        background: rgba(0,0,0,0);
      } .bubble-sub-button-2 {
        display:
          ${location.hash === '#studio_open' ? 'none' : ''};
      } .bubble-sub-button-3 {
        display:
          ${location.hash === '#studio_open' ? '' : 'none'};
      }
  - type: custom:bubble-card
    name: Studio
    card_type: button
    button_type: switch
    entity: light.gruppe_studio
    sub_button:
      - entity: sensor.dg_studio_steckdose_schreibtisch_energy_power
        state_background: false
        show_state: true
      - icon: mdi:air-conditioner
        entity: climate.dg_studio_klimaanlage_dg_studio_klimaanlage
        select_attribute: hvac_modes
      - entity: sensor.dg_studio_thermometer_temperature
        icon: mdi:thermometer
        state_background: false
        show_state: true
      - icon: mdi:motion-sensor
        entity: binary_sensor.
      - icon: mdi:menu
    modules:
      - bubble_accordion
    bubble_accordion:
      open_duration: 300
      close_duration: 300
      sub_button_duration: 300
  - type: custom:bubble-card
    card_type: button
    name: Obergeschoss
    icon: mdi:home-roof
    sub_button:
      - icon: mdi:air-conditioner
        entity: climate.og_schlafzimmer_klimaanlage_og_schlafzimmer_klimaanlage
        select_attribute: hvac_modes
      - name: open
        icon: mdi:chevron-down
        tap_action:
          action: navigate
          navigation_path: "#og_open"
      - name: close
        icon: mdi:chevron-up
        tap_action:
          action: navigate
          navigation_path: "#"
    styles: |
      .bubble-background {
        background: rgba(0,0,0,0);
      } .bubble-sub-button-2 {
        display:
          ${location.hash === '#og_open' ? 'none' : ''};
      } .bubble-sub-button-3 {
        display:
          ${location.hash === '#og_open' ? '' : 'none'};
      }
    button_type: switch
    entity: light.gruppe_og
  - type: custom:bubble-card
    name: Schlafzimmer
    card_type: button
    button_type: switch
    entity: light.gruppe_schlafzimmer
    sub_button:
      - entity: sensor.og_schlafzimmer_steckdose_device_power
        state_background: false
        show_state: true
      - icon: mdi:air-conditioner
        entity: climate.og_schlafzimmer_klimaanlage_og_schlafzimmer_klimaanlage
        select_attribute: hvac_modes
      - entity: sensor.og_schlafzimmer_thermometer_temperature
        icon: mdi:thermometer
        state_background: false
        show_state: true
      - icon: mdi:motion-sensor
        entity: binary_sensor.og_schlafzimmer_praesenzmelder_occupancy
      - icon: mdi:menu
    modules:
      - bubble_accordion
    bubble_accordion:
      open_duration: 300
      close_duration: 300
      sub_button_duration: 300
  - type: custom:bubble-card
    name: Liz
    card_type: button
    button_type: switch
    entity: light.gruppe_liz
    sub_button:
      - entity: sensor.og_liz_thermometer_temperature
        icon: mdi:thermometer
        state_background: false
        show_state: true
      - icon: mdi:motion-sensor
        entity: binary_sensor.
      - icon: mdi:menu
    modules:
      - bubble_accordion
    bubble_accordion:
      open_duration: 300
      close_duration: 300
      sub_button_duration: 300
  - type: custom:bubble-card
    name: Badezimmer
    card_type: button
    button_type: switch
    entity: light.gruppe_badezimmer
    sub_button:
      - entity: sensor.og_badezimmer_steckdose_device_power
        state_background: false
        show_state: true
      - entity: sensor.og_badezimmer_thermometer_temperature
        icon: mdi:thermometer
        state_background: false
        show_state: true
      - entity: sensor.og_badezimmer_thermometer_humidity
        icon: mdi:thermometer
        state_background: false
        show_state: true
      - icon: mdi:menu
    modules:
      - bubble_accordion
    bubble_accordion:
      open_duration: 300
      close_duration: 300
      sub_button_duration: 300
  - type: custom:bubble-card
    name: Flur
    card_type: button
    button_type: switch
    entity: light.gruppe_flur_og
    sub_button:
      - entity: sensor.og_badezimmer_steckdose_device_power
        state_background: false
        show_state: true
      - icon: mdi:menu
    modules:
      - bubble_accordion
    bubble_accordion:
      open_duration: 300
      close_duration: 300
      sub_button_duration: 300
  - type: custom:bubble-card
    card_type: button
    name: Erdgeschoss
    icon: mdi:home-roof
    sub_button:
      - name: open
        icon: mdi:chevron-down
        tap_action:
          action: navigate
          navigation_path: "#eg_open"
      - name: close
        icon: mdi:chevron-up
        tap_action:
          action: navigate
          navigation_path: "#"
    styles: |
      .bubble-background {
        background: rgba(0,0,0,0);
      } .bubble-sub-button-1 {
        display:
          ${location.hash === '#eg_open' ? 'none' : ''};
      } .bubble-sub-button-2 {
        display:
          ${location.hash === '#eg_open' ? '' : 'none'};
      }
    button_type: switch
    entity: light.gruppe_eg
  - type: custom:bubble-card
    card_type: button
    button_type: switch
    entity: light.gruppe_waschraum
    name: Küche
    sub_button:
      - entity: sensor.eg_kueche_gruppe_stromverbrauch
        state_background: false
        show_state: true
      - icon: mdi:dishwasher
        entity: input_select.spuelmaschine_status
        show_arrow: false
      - entity: sensor.eg_kueche_thermometer_temperature
        icon: mdi:thermometer
        state_background: false
        show_state: true
      - icon: mdi:motion-sensor
        entity: binary_sensor.presence_sensor_fp2_eg_kueche
      - icon: mdi:menu
    modules:
      - bubble_accordion
    bubble_accordion:
      open_duration: 300
      close_duration: 300
      sub_button_duration: 300
  - type: custom:bubble-card
    card_type: button
    name: Keller
    icon: mdi:home-roof
    sub_button:
      - name: open
        icon: mdi:chevron-down
        tap_action:
          action: navigate
          navigation_path: "#ug_open"
      - name: close
        icon: mdi:chevron-up
        tap_action:
          action: navigate
          navigation_path: "#"
    styles: |
      .bubble-background {
        background: rgba(0,0,0,0);
      } .bubble-sub-button-1 {
        display:
          ${location.hash === '#ug_open' ? 'none' : ''};
      } .bubble-sub-button-2 {
        display:
          ${location.hash === '#ug_open' ? '' : 'none'};
      }
    button_type: switch
    entity: light.gruppe_ug
  - type: custom:bubble-card
    card_type: button
    button_type: switch
    entity: light.gruppe_waschraum
    name: Waschraum
    sub_button:
      - entity: sensor.ug_waschraum_gruppe_stromverbrauch
        state_background: false
        show_state: true
      - icon: mdi:washing-machine
        entity: input_select.waschmaschine_status
        show_arrow: false
      - entity: sensor.ug_waschraum_thermometer_temperature
        icon: mdi:thermometer
        state_background: false
        show_state: true
      - icon: mdi:motion-sensor
        entity: binary_sensor.ug_waschraum_praesenzmelder_occupancy
      - icon: mdi:menu
    modules:
      - bubble_accordion
    bubble_accordion:
      open_duration: 300
      close_duration: 300
      sub_button_duration: 300
  - type: custom:bubble-card
    card_type: button
    name: Draußen
    icon: mdi:watering-can
    sub_button:
      - name: open
        icon: mdi:chevron-down
        tap_action:
          action: navigate
          navigation_path: "#draussen_open"
      - name: close
        icon: mdi:chevron-up
        tap_action:
          action: navigate
          navigation_path: "#"
    styles: |
      .bubble-background {
        background: rgba(0,0,0,0);
      } .bubble-sub-button-1 {
        display:
          ${location.hash === '#draussen_open' ? 'none' : ''};
      } .bubble-sub-button-2 {
        display:
          ${location.hash === '#draussen_open' ? '' : 'none'};
      }
    button_type: switch
    entity: light.gruppe_garten
  - type: custom:bubble-card
    card_type: button
    button_type: switch
    entity: light.gruppe_garten
    name: Garten
    sub_button:
      - entity: sensor.garten
        state_background: false
        show_state: true
      - entity: sensor.dg_balkon_thermometer_temperature
        icon: mdi:thermometer
        state_background: false
        show_state: true
      - icon: mdi:motion-sensor
        entity: binary_sensor.ug_waschraum_praesenzmelder_occupancy
      - icon: mdi:menu
    modules:
      - bubble_accordion
    bubble_accordion:
      open_duration: 300
      close_duration: 300
      sub_button_duration: 300
  - type: custom:bubble-card
    card_type: button
    button_type: switch
    entity: light.gibtsnet
    name: Hauseingang
    sub_button:
      - icon: mdi:motion-sensor
        entity: binary_sensor.reolink_video_doorbell_wifi_person
      - icon: mdi:menu
    modules:
      - bubble_accordion
    bubble_accordion:
      open_duration: 300
      close_duration: 300
      sub_button_duration: 300
  - type: custom:bubble-card
    card_type: button
    button_type: switch
    entity: light.draussen_fahrradhaus_decke
    name: Fahrradhaus
    sub_button:
      - icon: mdi:motion-sensor
        entity: binary_sensor.reolink_video_doorbell_wifi_person
      - icon: mdi:menu
    modules:
      - bubble_accordion
    bubble_accordion:
      open_duration: 300
      close_duration: 300
      sub_button_duration: 300
  - type: custom:bubble-card
    card_type: button
    button_type: name
    entity: light.draussen_fahrradhaus_decke
    name: Abfall
    visibility:
      - condition: numeric_state
        entity: sensor.abfallnaechster
        below: 2
    sub_button:
      - entity: sensor.abfallbiotonne
        show_state: true
        visibility:
          - condition: or
            conditions:
              - condition: state
                entity: sensor.abfallbiotonne
                state: Heute
              - condition: state
                entity: sensor.abfallbiotonne
                state: Morgen
      - entity: sensor.abfallgelbersack
        show_state: true
        visibility:
          - condition: or
            conditions:
              - condition: state
                entity: sensor.abfallgelbersack
                state: Heute
              - condition: state
                entity: sensor.abfallgelbersack
                state: Morgen
      - entity: sensor.abfallpapiertonne
        show_state: true
        visibility:
          - condition: or
            conditions:
              - condition: state
                entity: sensor.abfallpapiertonne
                state: Heute
              - condition: state
                entity: sensor.abfallpapiertonne
                state: Morgen
      - entity: sensor.abfallrestmuell
        show_state: true
        visibility:
          - condition: or
            conditions:
              - condition: state
                entity: sensor.abfallrestmuell
                state: Heute
              - condition: state
                entity: sensor.abfallrestmuell
                state: Morgen
      - entity: sensor.abfallglastonne
        show_state: true
        visibility:
          - condition: or
            conditions:
              - condition: state
                entity: sensor.abfallglastonne
                state: Heute
              - condition: state
                entity: sensor.abfallglastonne
                state: Morgen
      - icon: mdi:menu
    show_icon: true
    icon: mdi:delete
    modules:
      - subbutton_colors
    subbutton_colors:
      subbutton1:
        color: brown
      subbutton2:
        color: orange
      subbutton3:
        color: green
      subbutton4:
        color: black
      subbutton5:
        color: red
title: Bla

[Hipperd]

This card is fantastic, but I can't get it to work like the example. Mine's placed next to the main card instead of underneath it. Could you perhaps point out where the error is?

square: false
type: grid
cards:
  - type: custom:bubble-card
    card_type: button
    button_type: slider
    sub_button:
      - name: open
        icon: mdi:chevron-down
        tap_action:
          action: navigate
          navigation_path: "#bubble_card_open"
      - name: close
        icon: mdi:chevron-up
        tap_action:
          action: navigate
          navigation_path: "#"
    styles: |
      ha-card {
        --bubble-main-background-color: #333532 !important;
      } .bubble-sub-button-1 {
        display:
          ${location.hash === '#bubble_card_open' ? 'none' : ''};
      } .bubble-sub-button-2 {
        display:
          ${location.hash === '#bubble_card_open' ? '' : 'none'};
      } .bubble-sub-button-3 {
        display:
          ${location.hash === '#Linksboven_open' ? '' : 'none'};
      }
    entity: light.gang
    show_attribute: true
    attribute: brightness
    min_value: 1
    max_value: 100
    step: 1
    allow_light_slider_to_0: true
    slider_live_update: true
    light_transition: true
    modules: []
    tap_action:
      action: toggle
    button_action:
      tap_action:
        action: toggle
  - type: custom:bubble-card
    card_type: button
    button_type: switch
    entity: light.light_9
    name: Linksboven
    show_attribute: true
    attribute: brightness
    tap_action:
      action: toggle
    button_action:
      tap_action:
        action: toggle
    modules:
      - bubble_accordion
    styles: |
      ha-card {
      --bubble-main-background-color: #333532 !important;
       }
columns: 2

[jjanssen95]

Any way to get this to work in a bubble-card pop-up?

[Pe-MaKer]

Thanks @ken-hacs-2025 for this module.
I think, I messed up in my config because I cannot access the accordeon via ui editor anymore. Any change has to be made using the RAW configuration yaml. Furthermore the spacings between and below the parent cards are larger than usual.

Bildschirmaufnahme.2025-10-20.152758.mp4

my raw config for both parent cards and their child popups #licht and #bubble_card_open:

          - type: custom:bubble-card
            card_type: button
            button_type: state
            sub_button:
              - name: open
                icon: mdi:chevron-down
                tap_action:
                  action: navigate
                  navigation_path: '#bubble_card_open'
              - name: close
                icon: mdi:chevron-up
                tap_action:
                  action: navigate
                  navigation_path: '#'
            styles: |
              .bubble-background {
                background: rgba(0,0,0,0);
              } .bubble-sub-button-1 {
                display:
                  ${location.hash === '#bubble_card_open' ? 'none' : ''};
              } .bubble-sub-button-2 {
                display:
                  ${location.hash === '#bubble_card_open' ? '' : 'none'};
              }
            entity: cover.wohnzimmer
            name: alle Rollos
          - type: custom:bubble-card
            card_type: cover
            entity: cover.rl11
            name: Terrassenfenster
            modules:
              - bubble_accordion
          - type: custom:bubble-card
            card_type: cover
            entity: cover.rl13
            name: Schiebetür
            modules:
              - bubble_accordion
          - type: custom:bubble-card
            card_type: cover
            entity: cover.rl14
            name: Fenster
            modules:
              - bubble_accordion
          - type: custom:bubble-card
            card_type: button
            button_type: state
            sub_button:
              - name: open
                icon: mdi:chevron-down
                tap_action:
                  action: navigate
                  navigation_path: '#licht'
              - name: close
                icon: mdi:chevron-up
                tap_action:
                  action: navigate
                  navigation_path: '#'
            styles: |
              .bubble-background {
                background: rgba(0,0,0,0);
              } .bubble-sub-button-1 {
                display:
                  ${location.hash === '#licht' ? 'none' : ''};
              } .bubble-sub-button-2 {
                display:
                  ${location.hash === '#licht' ? '' : 'none'};
              }
            entity: light.wohnzimmer_alle_lampen
            name: ''
          - type: custom:bubble-card
            button_type: slider
            hash: '#licht'
            entity: light.deckenlampe_wz
            card_type: button
            modules:
              - bubble_accordion
            bubble_accordion:
              hash_name: '#licht'
          - type: custom:bubble-card
            button_type: slider
            hash: '#licht'
            entity: light.deckenlampe_wz_nachtlich
            name: Deckenlampe - Nachtlicht
            card_type: button
            modules:
              - bubble_accordion
            bubble_accordion:
              hash_name: '#licht'
          - type: custom:bubble-card
            button_type: slider
            hash: '#licht'
            entity: light.deckenlampe_wz_ambilight
            card_type: button
            modules:
              - bubble_accordion
            bubble_accordion:
              hash_name: '#licht'
          - type: custom:bubble-card
            button_type: switch
            hash: '#licht'
            entity: light.lr14
            card_type: button
            modules:
              - bubble_accordion
            bubble_accordion:
              hash_name: '#licht'
          - type: custom:bubble-card
            button_type: switch
            hash: '#licht'
            entity: light.paco
            card_type: button
            modules:
              - bubble_accordion
            bubble_accordion:
              hash_name: '#licht'
          - type: custom:bubble-card
            button_type: switch
            hash: '#licht'
            entity: light.leuchtschwert
            card_type: button
            modules:
              - bubble_accordion
            bubble_accordion:
              hash_name: '#licht'
          - type: custom:bubble-card
            button_type: switch
            hash: '#licht'
            entity: light.stimmungslicht
            card_type: button
            modules:
              - bubble_accordion
            bubble_accordion:
              hash_name: '#licht'
          - type: horizontal-stack
            cards:
              - type: custom:mushroom-climate-card
                entity: climate.wohnzimmer
                show_temperature_control: true
                name: Couch
              - type: custom:mushroom-climate-card
                entity: climate.wohnzimmerfenster
                show_temperature_control: true
                name: Fenster

[xoatrash]

So this is not working in a Popup card?

[LutraVulgaris]

really cool concept!
I made a parent card and another bubble card and gave it this module but the weird thing the card vanished? i can't edit it so I can't really see what I'm doing or where it is and in what order.. what is the correct way to do this?
the card exists but is not editable or even somehwere in the yaml. but is will call it when pressed on the accordeon button.. weird

put it in a vertical card that way you can see what you are doing.

reaaaaaaly would like it to function in a pop-up card!

[uwe72]

Is there a way to get rid of the hug space between the last 2 cards?

[ratava]

@Clooos It appears this module is no longer support and has error in recent versions of HA. The repository is not show in his list either.

Might be worth marking this one unsupported.

[Clooos]

@ken-hacs-2025 Can you confirm this?

Also "unsupported modules" in Bubble Card just means "unsupported by a card type" and so these are supported by other card types, like a module that only works with pop-ups is defined as "unsupported" on a button card.