For the block on the left => Lateral tabs feature - "On Start" Tabs - With 2 design versions The codes are in the demo pages, at the bottom.
Concerning new page in the same modal => no, as Softr team decided to not let this happen anymore (unfortunately) if Iâm correct. I will try to find a solution with a JS snippet. It will appear in the âcustom codingâ section of the public community if I find it
Great! Thanks 
So, Iâd add this block into the same page as the desktop version, but just set visibility to mobile?
Will that work, or will it mess with all the desktop tab set up?
Hi James,
I didnât understand, which block? Why mobile? 
I shouldâve been more clear!
Your wonderful coded tabs, using a hard coded block. I have that set up for the userâs dashboard on desktop.
If a user views this on their mobile, it doesnât workâŚ
So I need a mobile version that works on the same Softr page without destroying the desktop version.
When I told you I had 3 or 4 versions everywhere⌠=> Update to unofficial Tabs feature: Full customizable buttons + Responsive - #5 by matthieu_chateau
This one creates a dropdown on mobile => you can set the custom code block only available for mobile, if you want. Unless you use only a âsimpleâ hardcoded buttons version (I mean: not the âon start tabsâ. If you use the âon start tabsâ you will have to play with the device visibility of the related custom code block).
If youâre not very comfortable with code => please just use the responsive version with hardcoded buttons (so no lateral tabs) otherwise there will be conflict everywhere that I wonât be able to solve by lack of time.
If problems or other inquiries= DM as I want the thread to stay readable, thanks!
I really hope it will eventually become an official feature/block
@matthieu_chateau Iâm using this a bunch in my app now but I just went to implement it using 2 custom-code blocks (switching between 2 embedded sites using 2 buttons at the top of the page) and it doesnât seem to like that.
It hides the second custom-block but wonât switch to it. Iâm fairly certain I donât have any errors in the code; however, do you know if A) this is even possible and B) does the code need to be modified at all to work with custom code blocks?
Code snippet below:
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
.button-group {
display: flex;
justify-content: center;
}
.button {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
border-radius: 0;
border: none;
cursor: pointer;
background-color: transparent;
color: #2F3133;
outline: none;
border: none;
text-align: center;
border-bottom: 2px solid #A9A9A9;
transition .3s;
margin-right: 0em;
margin-left: 0em;
padding-right: 30px;
padding-left: 30px;
}
.button:active, .active {
font-size: 14px;
font-weight: bold;
border-radius: 0;
border: none;
cursor: pointer;
background-color: transparent;
color: #2F3133;
outline: none;
border: none;
text-align: center;
border-bottom: 2px solid black;
transition .3s;
margin-right: 0em;
margin-left: 0em;
padding-right: 30px;
padding-left: 30px;
}
button:focus {outline:0;}
button:hover
</style>
</head>
<body>
<div class="button-group">
<button class="button active" onclick="runButton1Script()">Custom Code Block 1</button>
<button class="button" onclick="runButton2Script()">Custom Code Block 2</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("block1").style.display = "block";
document.getElementById("block2").style.display = "none";
});
function runButton1Script() {
document.getElementById("block1").style.display = "block";
document.getElementById("block2").style.display = "none";
console.log("Button 1 clicked");
}
function runButton2Script() {
document.getElementById("block2").style.display = "block";
document.getElementById("block1").style.display = "none";
console.log("Button 2 clicked");
}
</script>
</html>
Hi,
This works fine with 2 custom code blocks with embedded content in it (it works with 2 airtable embedded forms, for example).
The âhtml + css + javascriptâ is inserted in a first custom code block. So at the end you will have 3 custom code blocks in your page.
Then I named the custom blocks with the two airtable forms => block1 and block2. Everything works fine.
Anything I should know in addition?
Interesting, thatâs exactly what I have but itâs not actually functioning.
There must be a mistake on your side, a letter missing, a conflict with another code, something. It can come from a little detail that you missed, unfortunately.
Before I get tucked into this, does it work with list details blocks?
, yes, as always, it works with all blocks. Just be careful with your conditional filters+ if you have different visibility settings = one tab feature (one tab custom code) by user group.
Having trouble with getting it to make columnsâŚin the header code, it says âtableâ - does this part need to be changed to the blocks I am applying it to?
Or maybe something here. It would be helpful to have all the areas that would need to be changed for different blocks highlighted on the page
This is not the right thread => Lateral tabs feature - "On Start" Tabs - With 2 design versions
To display blocks in the right column => the code inside the footer (page settings)
Iâd already changed those, of course. But then again, I donât have much coding experience. Maybe this isnât the place for me to learn after all!
You were right 
I was calling the same block for both buttons. Fixed and it works great again!
Thanks for the code!
PSA: Iâve been using this tutorial as the foundation of TONS of versions on my site now. USE CODEPEN TO PLAY WITH CONFIGS Itâs been a real gamechanger for figuring out how to get it to do tons of different stuff! codepen + chatgpt⌠the possibilities are endless! I have multiple on one page and figuring out the styling and functionality would have been impossible without codepen I even figured out how to have it change buttons on one page with several blocks so itâs like an onboarding process! I love this and thank you again @matthieu_chateau <3 !!!
https://codepen.io/danyalamribencr/pen/bGQqpWd â link to example button block that takes user through onboarding (all blocks live on ONE page! Iâm proud of myself heh)
I can see youâre becoming a professional low-coder ! 
I can see you enjoy it!