Toogle visibility 4 blocs

Hi,
is it possible to use 4 buttons or icons and when I click icon 1, the toggle visibility bloc 1 open.
And then I click the Icon 2, and now the bloc 1 should close and open the bloc 2 …
So only one toggle visibility bloc is open ( same at the accordion thing )

And when you hit the icon, sometimes the bloc below open and I have so scroll down. Is there a way that it scroll automatically ?
:slight_smile:
thanks
tom

I think what you’re asking is if there is an option to add more than 1 toggle visibility interaction to an object. If this is correct, the answer is Yes. In the two button/icon example. Button one would toggle the visibility of Bloc 1. Button two would toggle the visibility of both Blocs 1 and 2 Just add the id’s of both blocs in the target ID`s field

Not sure I understand the second part of your question. Are you asking about the scroll to target interaction??

1 Like

I would do this using the class collapse and not the visibility option in Blocs.

Basically add a class called collapse to the bloc and it will be hidden.

Then using attributes toggle the collapse using IDs to target.

Its basic Bootstrap and works well.

To get it to scroll when you toggle the collapse, just use the collapse event show.

$('#myCollapsible').on('show.bs.collapse', function () {
   put the scroll to stuff here...
})

Hi @hendon52 and @PeteSharp
thanks for your answer. Hard to explain with my bad english knowledge …

@PeteSharp is there a chance for a example bloc file ?

@hendon52 the problem with the toggle visibility is that open both blocs when I click one button ? I only want to open 1 bloc, and when I click another button I want to close that bloc an open another bloc…

tom

tom

I am sure you can figure it out, its all documented.

You will need some javascript to collapse everything else with something toggles though.

I think you will have a problem with using the visibility options to achieve what it is you’re trying to do. This is because toggle visibility is what it says on the can - its a sort of on/off switch that can display or hide content, depending upon the initial state of what is displayed. In other words, it only has two states. What you’re trying to achieve requires three states. display the first content, hide the second content and replace the content with either the first or second content, depending on what is displayed at the time. This cannot be done with the standard on/of feature of toggle visibility. Instead, you will have to resort to a coded solution such as recommended by @PeteSharp.

The use of such features must really have a “user intent” behind the interface logic. If we knew what the intent was, we could perhaps offer a more relevant solution for you. From what I understand at the moment, you need to have nothing displayed accept the two buttons and clicking one button will reveal 1 piece of content, and clicking the second button will replace that content with a different piece of content. This is relatively easy to do, but there is nothing to stop a user from clicking both buttons, which will result in both pieces of content displaying at the same time.

If you use visibility options, the best you can achieve is with a single button that switches content one from visible to invisible and, at the same time, makes content two visible. Clicking the toggle again would reverse the process, but this requires that there is some default content to start with so that the toggle can switch back and forth (the two states).

If you can tell us more exactly what it is you want to achieve and some explanation of the user logic behind the requirement, we may be able to offer a different solution.

Hi @hendon52
thanks for your answer. I try to explain.
I call it icon A / icon B and icon C

When I press icon A it open a bloc A. Now I press icon B and then bloc A close and bloc B open. And when I click icon C, bloc C open and bloc B close. So there is only one bloc to see.
And that is not possible with the visibility option. I don´t know if there is another option.

So I think the “collapse” class @PeteSharp wrote is okay. Don´t get it to work at this moment, I try again tomorrow :slight_smile:

tom

1 Like

A toggle is dumb, it changes the state from one to another. To get what you are wanting working you have to add a bit of smarts to it.

Eg. Open B needs to check if A is open, if it is then toggle it closed, else don’t otherwise it will open as well.

sounds complicated … so, I can try it also with the accordion bric. not exactly want I want but inside of blocs app and easy to use

thanks @hendon52 and @Malachiman

Good learning curve though. Take on the challenge, you will appreciate it later.

:joy: not the time at the moment to learn new things.

Never is, learning new things takes an investment of time. The trade off is that in the future you can do more and at a faster speed. You also develop more of an ability to problem solve and come up with solutions.

2 Likes

there is a bit of truth to it.

Is there a way to apply the collapse class only in certain breakpoints?

Hi @chicuelo

Yes you can. I would suggest not using JQuery like the example earlier in this thread though.

Here is an easy guide for using JavaScript to detect breakpoints.

And the BS5 method of collapse.

1 Like

Wouldn’t @Whittfield Card Designer do this?

@KBConcepts do you mean tab anything??

1 Like

I will dig into this, thanks as always!

1 Like

Yes, sorry I didn’t make myself clear.

I don’t think it does breakpoints though @KBConcepts

Also this thread predates Tab Anything.

1 Like