[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)