In love with the implementation!
Great job.
Thanks for sharing.
2 Likes
@matthieu_chateau fantastic workaround. The inability to organise pages into tabs was one major drawback compared with Stacker, but with this I can make some far more sensibly arranged pages.
Well done and thank you for sharing! Hopefully this gets built-in to Softr soon 
3 Likes
This 
is awesome and genius!
1 Like
Wow. I havenât even read this whole thread yet â just played with the demo â but wanted to quickly say Thank You, @matthieu_chateau. This is absolutely great and I have a couple of perfect use case that Iâve been trying to get my head around where I think this tab feature will be the perfect solutionâŚ
3 Likes
Super impressive - thanks of the share!
2 Likes
This so fantastic! Already using this everywhere on our site. It would be great to get code to change the text and background colors of the button that is clicked so that the user can tell which item they are looking at.
1 Like
Glad you love it!
The option to change the background colour of the clicked button : will try to do it tomorrow or after tomorrow. Changing the color or the text should be implemented too
Here it is : Note that it doesnât use a CTA block from Softr but a hardcoded button group
Demo: https://test-play.softr.app/tabs-with-custom-buttons
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
.button-group {
display: flex;
justify-content: center;
}
.button {
background-color: #182939;
color: white;
font-family: 'Inter', sans-serif;
font-size: 16px;
padding: 10px 20px;
margin-right: 30px;
padding-top: 9px;
padding-bottom: 9px;
border-radius: 14px;
border: none;
cursor: pointer;
}
.button:active, .active {
background-color: #f5e507;
color: #182939;
outline: none;
}
</style>
</head>
<body>
<div class="button-group">
<button class="button active" onclick="runButton1Script()">Button 1</button>
<button class="button" onclick="runButton2Script()">Button 2</button>
<button class="button" onclick="runButton3Script()">Button 3</button>
</div>
<script>
const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
button.addEventListener('click', function() {
buttons.forEach(b => b.classList.remove('active'));
this.classList.add('active');
});
});
</script>
</body>
<script>
// hide blocks
window.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("list1").style.display = "block";
document.getElementById("list2").style.display = "none";
document.getElementById("list3").style.display = "none"
});
function runButton1Script() {
document.getElementById("list1").style.display = "block";
document.getElementById("list2").style.display = "none";
document.getElementById("list3").style.display = "none";
document.getElementById("list1").scrollIntoView("list1");
console.log("Button 1 clicked");
}
function runButton2Script() {
document.getElementById("list2").style.display = "block";
document.getElementById("list1").style.display = "none";
document.getElementById("list3").style.display = "none";
document.getElementById("list2").scrollIntoView("list2");
console.log("Button 2 clicked");
}
function runButton3Script() {
document.getElementById("list3").style.display = "block";
document.getElementById("list1").style.display = "none";
document.getElementById("list2").style.display = "none";
document.getElementById("list3").scrollIntoView("list3");
console.log("Button 3 clicked");
}
</script>
</html>
2 Likes
This is fantastic! Thanks so much!
1 Like
Update: I managed to make it work with the var iterator = document.evaluate() method suggested by David Coletta.
It doesnât change anything visually but this is another method to make your JS snippets work when theyâre related to multiple Softr buttons.
Demo and full code snippet here: https://test-play.softr.app/tabs-for-softr-with-var-iterator-js-snippet
This is really excellent! Thank you @matthieu_chateau and @artur
I donât really know much JS, but I have changed the script to work with my blocks and buttons, also I have made it show/hide multiple blocks in each tab per button click. It was easy enough to figure out after looking at the code you shared.
Simple yet powerful. This is exactly how I wanted it to be designed: no big setup (one JS + Softr blocks you use all the time, after all) and easy to modify. Thanks for your support!
1 Like
Hey @matthieu_chateau,
By the way, I shared this workaround today with a Softr user 
He was so excited
Thanks once again 
Mattheiu, this is amazing - working to implement it now. Would you think itâs possible to have different visibilities/tabs depending on who is viewing the transaction? Assuming that they are the same user type, but different parties in a transaction for example.
Thanks for posting
Mark would love to hear about how you did this - need the same functionality.
Hi and thank you!
At some point the users should be two different user groups even if itâs the same transaction. Seller group /Buyer group for example. Otherwise it should be a huge load of work to make this setup function.
To know how to hide/show multiple blocks at the same time, as Mark did, itâs very easy:
You can can add as many document.getElementById("listXXX").style.display = "none" as you wish⌠Just replace ânoneâ by âblockâ each time you want the block to appear on a specific button click.
You just have to play with ânoneâ and âblockâ
Hi Matthieu, thanks for the reply. Ideally I would make them different user groups, but the issue is that products are dynamically created on my site by users and thereâs no way to set up additional user groups like âseller/buyerâ without messing with the general setup of the site. Would it be possible to hide the CTA block for a user assuming their recordID matches a condition or element on the page? and then to have two CTA blocks on the page w/ two separate scripts?
Lovely functionality either way, but figured Iâd ask!
You can also set two cta blocks up with two separate scripts, yes
Or you can use this method 
1 Like