New - unofficial - feature: TABS - Hide/Show multiple blocks horizontally

New update if you want to customize the hover and active button color effects when using a Softr CTA block and not hard-coded buttons

1 Like

This is amazing!!

I just want one little tweak and Iā€™m not sure how to do it without messing it all upā€¦

I donā€™t want it to scroll down on click - for some reason, it takes it slightly too far and cuts off the filters at the top of the list.

How can I adjust the code to either prevent the scroll completely, or reduce it?

Hi James!

Yes, but before I need to know which version do you want to use (I need to get this organized, there 3 or 4 different versions of the tabs featurešŸ˜…).

  1. if you want to use this feature with a Softr CTA block, it is going to be a problem as it needs the cta block to have the option ā€œscroll toā€. Otherwise the buttons have a default behaviour which leads the user to the homepage. That being said Iā€™m gonna ask Artur to remove this behaviour from CTA buttons, as it forces users to add additional stuff when they want to insert code.
    I could add an event.preventDefault() but asking Softr team to remove this would be easierā€¦ for everyone!:grin:

  2. If you want to use custom, hardcoded buttons, yes, itā€™s possible Here. You see the code? just remove all the lines with document.getElementById("blockX").scrollIntoView("blockX");

Iā€™m using the hardcoded so I can fully customize the buttonsā€¦

It worked beautifully, thank you. This has completely changed the user experience on my app now, thank you! (It also makes it easier to manage on Softr as its just one page.

So, how can I have some fun with the code to customize itā€¦ i.e. adding some animations to how the new block is displayed. I saw one example had the block come in from the left?

And!! Do you know how to get modals to open a new page within that same modal? If so, this would work beautifully alongside your tabs.

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 :slight_smile:

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? :sweat_smile:

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ā€¦ :sweat_smile: => 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!

3 Likes

I really hope it will eventually become an official feature/block

1 Like

@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?

:joy:, 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.

1 Like

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?

image

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 :slight_smile: