Tabs / Tabulated views

It would be super cool if there was something like a tab master block that basically lets me have tabs that I can insert blocks into.

So that I can have a tab selector that shows/hides groups of blocks.

Tab 1 → Block 1, Block 2, Block 3
Tab 2 → Block 4, Block 5, Block 6
Tab 3 → Block 7, Block 8, Block 9

I think this would really improve the experience and allow people to add more depth to their pages.


I agree 100%. A must have feature!

Note that you can do it with a workaround (with limits too)

Here is a code snippet (This was given by Joachim Brindeau from the Softr community). Put it into a custom code block.

You will replace all the <div class=“softr-embed…” by the embed clode of the block of your choice

	 CSS for the main interaction
	.tabset > input[type="radio"] {
	  position: absolute;
	  left: -200vw;
	.tabset .tab-panel {
	  display: none;
	.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
	.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
	.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
	.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
	.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
	.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
	  display: block;
	.tabset > label {
	  position: relative;
	  display: inline-block;
	  padding: 15px 15px 25px;
	  border: 1px solid transparent;
	  border-bottom: 0;
	  cursor: pointer;
	  font-weight: 700;
	.tabset > label::after {
	  content: "";
	  position: absolute;
	  left: 15px;
	  bottom: 10px;
	  width: 22px;
	  height: 4px;
	  background: #182939;
	.tabset > label:hover,
	.tabset > input:focus + label {
	  color: #F5E507;
	.tabset > label:hover::after,
	.tabset > input:focus + label::after,
	.tabset > input:checked + label::after {
	  background: #f5E507;
	.tabset > input:checked + label {
	  border-color: #ccc;
	  border-bottom: 1px solid #fff;
	  margin-bottom: -1px;
	.tab-panel {
	  padding: 30px 0;
	  border-top: 1px solid #ccc;
	.tabset {
	  max-width: 65em;
<script src=""></script>
<div class="tabset">
	  <input type="radio" name="tabset" id="tab1" aria-controls="My goals" checked>
	  <label for="tab1">My goals</label>
	  <input type="radio" name="tabset" id="tab2" aria-controls="Add a new goal">
	  <label for="tab2">Add a new goal</label>
	  <input type="radio" name="tabset" id="tab3" aria-controls="Mon profil">
	  <label for="tab3">Mon profil</label>
	  <div class="tab-panels">
		<section id="My goals" class="tab-panel">
		  <h2>My goals</h2>
		  <div class="softr-embed-container">
				<iframe id="softr-ddedebe1-184c-4fbd-9655-00ab8a1a5e9e-poste-emplois-hidden" src="" width="100%" height="1000" scrolling="no" frameborder="0" style="border:none;"></iframe>
				<script> iFrameResize({ checkOrigin: false, log: true }, '#softr-ddedebe1-184c-4fbd-9655-00ab8a1a5e9e-poste-emplois-hidden');</script>
		<section id="Add a new goal" class="tab-panel">
		  <h2>Add a new goal</h2>
				<div class="softr-embed-container">
					<iframe id="softr-ddedebe1-184c-4fbd-9655-00ab8a1a5e9e-poster-offre-hidden" src="" width="100%" height="1000" scrolling="no" frameborder="0" style="border:none;"></iframe>
					<script> iFrameResize({ checkOrigin: false, log: true }, '#softr-ddedebe1-184c-4fbd-9655-00ab8a1a5e9e-poster-offre-hidden');</script>
		<section id="Mon profil" class="tab-panel">
		  <h2>Mon profil</h2>
		  		<div class="softr-embed-container">
					<iframe id="softr-ddedebe1-184c-4fbd-9655-00ab8a1a5e9e-user-profile-hidden" src="" width="100%" height="1000" scrolling="no" frameborder="0" style="border:none;"></iframe>
					<script> iFrameResize({ checkOrigin: false, log: true }, '#softr-ddedebe1-184c-4fbd-9655-00ab8a1a5e9e-user-profile-hidden');</script>

This is how it will look like (sorry I embedded the same block for the three tabs)


Hey @JohnK,

Thanks for bringing this to our attention. I will add it as a feature request :slight_smile:
Meanwhile, I hope the workaround suggested by @matthieu_chateau will be helpful :slight_smile:


wait, this is awesome! Thanks @matthieu_chateau.
This could do the trick until the official feature comes out.

Would it be possible to put two blocks or more per tab if I insert multiple embed codes where the “<div class=“softr-embed…” is, back to back?

1 Like

Having some problems getting this working.

Two issues I’m encountering are:

  1. There is always a gray box with a " unexpectedly closed the connection." error
  2. Once I insert a block into one of the tabs, the other two tabs show up below it.

EDIT: figured out the solution here. Need to replace the iframe following the <div class...>

1 Like

Is everything ok ?
The jbjobfinder is the website of Joachim, I didn’t replace all. Of course, in the code snippet, you need to rewrite some url paths that don’t match.

Let me know if you succeed in adding multiple blocks per tab.

Glad I could hep

@matthieu_chateau yup, got it working to a degree. Multiple blocks seem like they work if I just put them after each other.

Having an issue with lists. They’re simply not displaying (same thing as with the show/hide feature funny enough).

Any idea what could be causing this?

Getting the blow error when I try to insert the code for the list block. This list does not have any conditional filters (tested with lists that do have conditional filters also and receiving the same error).

I also tested just pasting the list code into a custom code block and I’m getting the same error.

Screen Shot 2022-09-25 at 10.50.58 AM

Hi @matthieu_chateau , This is great! thanks so much for posting. I have embedded and got the tabs working. However now I am wondering how to hide the blocks that the embeded code is coming from?

For example - I created 2 blocks, then I added the custom code block and embedded these 2 blocks (which works great), I now want to hide the original 2 blocks so the content is not duplicated on the page but when I disable them it disables the embedded content blocks too.

Any advice would be great :slight_smile:



Hi Anna!
Unfortunately… This is not possible, the two blocks have to be “live” to be displayed elesewhere. That’s the limit of such a method.

Be aware that I requested for a tab feature, naitive from Softr. Can’t give you any ETA, so for now, the best is to “host” your original blocks in a specific page.

1 Like

I believe you can hide the original blocks by putting them on a different page that is not accessible to your users. Try copying the original blocks to a new page that is not linked from anywhere, then deleting the original blocks, then re-embedding.

Please let us know if it worked!

1 Like

@dcoletta Thanks for the help, This solution worked for me.

For future reference for anyone else want to replicate,

  • I created a new page called hidden blocks and changed the visibility to a new user group I created called ‘Hidden’ which just had my email attached to it for logged in users
  • I copied all the blocks I wanted to hide to this page and deleted the old ones
  • I updated the embedded code to the newly created blocks
1 Like