Here is the code, to be inserted in a custom code block, if you want buttons to change colors according to the one you clicked on + a slight better UI.
I made it so that most of the requested customization can be handled (background colors, font color, border radius, padding, gap between buttonsā¦)
Note that I updated it so it is responsive: on mobile the buttons become a dropdown
Amazing work Matthiew, this is much needed as you can see from my picture!
I wanted to ask, is there a way for a tab to display multiple lists? So for example, tab1 displaying ālist 1ā, ālist2ā and ālist3ā for example?
Specifically interested in how you have a list of projects at the top and can select various ones without leaving the page in order to view the associated record details? I feel like maybe itās really obvious and I might be missing something basic but would LOVE to figure out how to recreate for a management dashboard I am configuring
Hi Matthieu ā this is great! Iām a bit stuck on how to update the part though for the mobile responsive version. I had been implementing your different versions step by step to ensure it worked and it did (yay!). But when I went to do the responsive version, I donāt know how to link to the lists in the new script you provided (as it seems I had to replace all the code ā unless I did that wrong). Iām a novice at code so itās not intuitive to me.
Do the blocks need to be forms, charts, or lists, @matthieu_chateau ?
It seems to only work with those blocks and not when I add a CTA block, could that be?
Thanks so much for building this!! Such a game changer!!!
Update: it seems like I simply canāt set up visibility settings within the blocks?
It works with any block + visibility settings and conditional filters apply normally. The code has 0 effect on visibility conditions.
The logic of your visibility conditions might need to be reflected in the custom code.
If you have different visibility settings for different blocks and you donāt reflect them in the custom code, it wonāt work. But this is just visibility conditions applying normally, the code doesnāt change it itself.
To make it more simple: you can add one custom code block (related to the tab feature) for each of your visibility conditions. And you just hide/show the blocks that meet the visibility conditions for each of your blocks.
Aah thatās amazing! Great to know! Thank you!!!
Have you seen anyone posting such a custom code in the community forum for your tabs feature?
I wouldnāt know where to start to write a custom code for visibility options. I still donāt really have coding skills
You donāt need to write any code => everything should follow the normal Softr visibility conditions.
The only thing that might be needed is to duplicate the custom code block for the tabs feature each time you want to display different visibility conditions for a set of blocks (with the same visibility conditions they have)
Hey @matthieu_chateau
Iām struggling to combine this version with the code you shared to click one of the buttons via ?tab=chart within the URL. I thought I could just replace the JS code with the one you provided, but I seem to be missing something. Any tip how I could make this work?
Would reeeeally appreciate it!!