Lateral tabs feature - "On Start" Tabs - With 2 design versions

Custom Coding
,
1

Following my tuto on how to build a tabs feature - (You will find it here), I did the same but even more condensed by putting the buttons on the left by creating a two columns layout.

The setup for all of this is not small but it gathers a lot of code snippets that I and other community members brought here. A perfect example to show you how multiple snippets can fit together to make something unique.

Demo design 1: https://test-play.softr.app/lateral-tabs
Demo design 2: https://test-play.softr.app/lateral-tabs-2

I won’t explain anything here, all the needed codes are at the bottom of each demo page.

Thanks!

lateral-tabs-2
lateral-tabs

2 Likes
2

Another perfect workaround, thanks you :slight_smile:

1 Like
3

Softr Workaround certified expert :grimacing:

4

@matthieu_chateau - I might be over my skis here but if I have two custom code blocks with buttons in them, how do I apply the lateral styling/positioning to only one block of buttons? Thanks!

5

Hi!

You just need to repeat what I wrote and add the second custom code block below.

The part of the code where you add the custom code block with the buttons is this one:

<script>
$("#custom-code1").insertAfter($("#tocolumn1"));
$("#form2").insertAfter($("#tocolumn2"));
$("#table2").insertAfter($("#tocolumn2"));
$("#chart2").insertAfter($("#tocolumn2"));
</script>

#custom-code1 is a custom code block. Here, it is written that it is inserted in column1

The second custom code block just has to be out of the whole setup.