Help Needed: Implementing Open/Close Buttons Correctly for f7-card expndable

Setup, Configuration and Use Widgets
1

Hi everyone,

I’m currently working on an open/close button functionality for a panel in my OpenHAB UI, but I’m running into issues. My goal is to have one button to open a “f7-card expandable” and another hide it and show a close button to close it. Here’s the code I’m using so far:

default:
  - component: oh-button
    config:
      class:
        - cell-open-button
        - card-opened-fade-out
      color: black
      iconF7: expand
      iconSize: 20px
      visible: =!vars.cardOpen
      action: variable
      actionVariable: cardOpen
      actionVariableValue: true
      style:
        background-color: white
        text-align: right
  - component: oh-button
    config:
      class:
        - card-opened-fade-in
        - cell-close-button
        - card-close
      visible: =vars.cardOpen
      color: black
      iconF7: xmark
      iconSize: 20px
      style:
        background-color: white
        text-align: right
      action: variable
      actionVariable: cardOpen
      actionVariableValue: false

The idea is that the expand button is only visible when the variable cardOpen is set to false, and the xmark button only when cardOpen is true. However, the visibility doesn’t work as expected, and the buttons behave inconsistently.

Does anyone have an idea what I might be doing wrong? Or is there a better way to achieve this functionality?

I appreciate any suggestions or advice!

Thank you in advance,

2

Without a more detailed description of what “inconsistent behavior” means and if there is a pattern to when it occurs, it is difficult to know exactly what is going on. Most likely, your OH variable gets of out sync with the state of the card. You don’t have access to f7 events in the widget expressions. For example, if you opened the card with the button (vars.cardOpen) is now true, but then swiped it closed, widget actions have no way of knowing that the card is now closed and your variable doesn’t change to reflect that state.

This is the significant trade off with trying to control the card open and closed state yourself with widgets. You either have to make sure that the only thing that can open and close the card is your widget actions so that your variables don’t get out of sync with the card state or use a stylesheet similar to your previous question to show the open/closing buttons based on the card’s current class instead of an oh variable.