Alternate visibility [SOLVED]

Does anyone know how to convert the “switch” to use it as and toggle visibility between another row?

when selecting the “switch” the interaction option does not appear…

and I want to use it to toggle it with a hidden row and only see when you select the “switch” …
If anyone has any clues, I would greatly appreciate it

You need to add custom attributes to the switch for it to work.

eg.

data-toggle=“collapse” data-target="#theID"

ok, let me try to see how it is, thanks
@PeteSharp

I will send you a custom Bloc I made recently for someone, it ill give you an idea on how it works. (this bloc will be overkill for what you are doing, but the principle is the same)

I have added the attributes but nothing happens … I’ve seen your code … I think it’s fine but I don’t know how to apply the attributes

Blocs adds a class called object-hidden when you hide something.

If you don’t use the side bar, but apply a class called collapse. it should work.

I have added these attributes to the “switch” … and I hide the row with its id … but it doesn’t work

I have it working here

Toggle_Visability.bloc (1.4 MB)

I take a look

yours works perfectly … but when applied to the project … it doesn’t work !!!

Did you hide the row with the side bar visibility options or add the class “collapse”. Don’t use the visibility options on the side bar, as they use an attribute with a reserved name, we can’t use it. So have to use the standard Bootstrap method.

perfect that was … I had it disabled on the panel … so just adding the class is more than enough perfectisimo

1 Like

Hey @nelo, that’s great.

The only down side using the collapse class, is it hides it in Blocs when designing. You can add a small bit of code in the page header to add the collapse class when the page loads in the browser to make it easier to design.

<script>
// Hide Content on page load
window.onload = function() {
  $('#yourID').addClass('collapse');
};
</script>
1 Like

Hey @PeteSharp, is it possible to toggle/hide multiple rows? I have to use a button to hide a row and unhide another. Maybe something like this:
Schermata 2020-07-25 alle 00.46.27

Can you help me please?

Hey @santino, you should be able to target classes as well.

so add a class for example like “multiple” to the ones you want to target.

Then add

data-target=".mutiple"

It should work, but I haven’t tested it.