This is the better way to go, but it requires reconfiguring your widget just little. You can’t really detect the card expansion if you are using the card-open-button and card-close-button f7 classes. What you can do instead is to take advantage of the fact that the card has an expandableOpened property. If this property is true, then the card is in its expanded state and if the property is false the card is collapsed.
I would use a variable, such as cardOpened, and set the expandableOpened property to that variable value:
expandableOpened: =!!vars.cardOpened
(the !! just gives slightly better null handling before the variable is used the first time).
Then just change your buttons. Remove the card-open/-close class and set the button action to modify the cardOpened variable:
action: variable
actionVariable: cardOpened
actionVariableValue: true
Set the variable value to true on the gear button and it will cause the card to open. Set it to false on the close button.
Now you have an easily accessible variable that tells you whether the card is opened or not and you can use this variable however you wish to change the styling of your content block. Here’s an example that just changes the top margin when the card is opened:
- component: f7-block
config:
class:
- no-padding
- card-prevent-open
style:
margin: 0px
margin-top: =(!!vars.cardOpened)?('25px'):('')
height: 135px