How to hide a floating button[mobile]

How to hide a floating button[mobile]

  

Hello everyone,


I'm working with a floating button on a page with 2 different tabs, if I go to one tab the button should show on the other tab it shouldn't. What i've tried so far: 

-Putting an if around the floating action based on a boolean that is true or false.  This only disables the button but still shows.

-Enclose the button in a container and put an if in the visible of the container: same here

-In the same container i also tried to put "display: none" or "visibility/visible: none". Nothing seems to work.


Does anyone have any other ideas? Maybe with javascript but my knowledge isn't too great.


Thanks in Advance

@Nick

Will the button do the same in both tabs?

Why don't you have 2 buttons and then control which appears, button 1 or button 2...

Solution

Hello Nick,


Are you talking about the Floating Action from the mobile patterns? 

If so, the problem is that the Floating Action won't disappear as long as you are in the same page. You'll have to clone the element from the mobile patterns and add some JavaScript to the "destroy action" of the block in order for it to disappear when you use an "if". 

The problem I believe is that the Floating Action element is being moved with javascript and then it's not being destroyed.

I've attached a working example.

Hope it helps

Solution

Thanks for all the effort Miguel! Works like a charm :)