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.

3 Likes

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

<style>
	/*
	 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;
	}
	
	/*
	 Styling
	*/
	
	.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;
	}
	</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></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="https://www.ipjobfinder.com/embed/pages/ddedebe1-184c-4fbd-9655-00ab8a1a5e9e/blocks/poste-emplois-hidden" 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>
			</div>
	  </section>
		<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="https://www.ipjobfinder.com/embed/pages/ddedebe1-184c-4fbd-9655-00ab8a1a5e9e/blocks/poster-offre-hidden" 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>
				</div>
		</section>
		<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="https://www.ipjobfinder.com/embed/pages/ddedebe1-184c-4fbd-9655-00ab8a1a5e9e/blocks/user-profile-hidden" 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>
				</div>
		</section>
	  </div>
	</div>
1 Like

This is how it will look like (sorry I embedded the same block for the three tabs)
ezgif-5-1d0e2f14c4

2 Likes

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:

2 Likes

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 " www.ipjobfinder.com 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