Update to unofficial Tabs feature: Full customizable buttons + Responsive

Custom Coding
,
#1

Hi all,
Following what I did to create a tabs feature here: New - unofficial - feature: TABS - Hide/Show multiple blocks horizontally

(Here for the demo: https://test-play.softr.app/hide-show-tabs?recordId=recZV04ZNE3pvMnKM)

Here is the code, to be inserted in a custom code block, if you want buttons to change colors according to the one you clicked on + a slight better UI.
I made it so that most of the requested customization can be handled (background colors, font color, border radius, padding, gap between buttons…)

<!DOCTYPE html>
<html>
<head>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
         .button-group {
            display: flex;
            justify-content: center;
        }

        .button {
            background-color: #182939;
            color: white;
            font-family: 'Inter', sans-serif;
            font-size: 16px; 
            padding: 10px 20px; 
            margin-right: 30px;
            padding-top: 9px;
            padding-bottom: 9px;
            border-radius: 14px;
            border: none;
            cursor: pointer;
        }

        .button:active, .active {
            background-color: #f5e507;
            color: #182939;
            outline: none;
        }
    </style>
</head>
<body>
    <div class="button-group">
        <button class="button active" onclick="runButton1Script()">Button 1</button>
        <button class="button" onclick="runButton2Script()">Button 2</button>
        <button class="button" onclick="runButton3Script()">Button 3</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("list1").style.display = "block";
        document.getElementById("list2").style.display = "none";
        document.getElementById("list3").style.display = "none"
    });

    function runButton1Script() {
        document.getElementById("list1").style.display = "block";
        document.getElementById("list2").style.display = "none";
        document.getElementById("list3").style.display = "none";
        document.getElementById("list1").scrollIntoView("list1");
        console.log("Button 1 clicked"); 
    }

         function runButton2Script() {
        document.getElementById("list2").style.display = "block";
        document.getElementById("list1").style.display = "none";
        document.getElementById("list3").style.display = "none";
        document.getElementById("list2").scrollIntoView("list2");
        console.log("Button 2 clicked");
    }
          function runButton3Script() {
        document.getElementById("list3").style.display = "block";
        document.getElementById("list1").style.display = "none";
        document.getElementById("list2").style.display = "none";
        document.getElementById("list3").scrollIntoView("list3");
        console.log("Button 3 clicked");
    }

</script>
</html>
1 Like
Need for many information to be displayed in your list details block? Check this out
New - unofficial - feature: TABS - Hide/Show multiple blocks horizontally
#2

You can disable the automatic scroll to the right block by removing the line .scrollIntoView() within each runButtonScript function.

You can left aligned buttons by replacing justify-content: center by justify-content: left
Same logic for right aligned buttons

Space between buttons: use margin-right

And so on with all the style options

Demo: https://test-play.softr.app/tabs-with-custom-buttons

1 Like
#3

Hey @matthieu_chateau,

Thanks for sharing, it’s fantastic :slight_smile:

#4

I added the var iterator = document.evaluate() method.

Another method to make your JS snippets work when they’re related to multiple Softr buttons

Demo and full code snippet here for this method: https://test-play.softr.app/tabs-for-softr-with-var-iterator-js-snippet

1 Like
#5

Update: Fully responsive version

I chose to change the button container to a dropdown menu, only when viewed on mobiles.

Here is the demo (you will see the change on mobile. The desktop version doesn’t change, of course): https://test-play.softr.app/tabs-with-custom-buttons-responsive

Now what do you have to change to make it fully responsive? (Buttons to dropdown menu)

Replace everything that is between <html> and </html> of the code I gave by:

<!DOCTYPE html>
<html>
<head>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
        
         .button-group {
            display: flex;
            justify-content: left;
        }

        .button {
            background-color: #182939;
            color: white;
            font-family: 'Inter', sans-serif;
            font-size: 15px; 
            padding: 10px 20px; 
            margin-right: 30px;
            padding-top: 8px;
            padding-bottom: 8px;
            border-radius: 14px;
            border: none;
            cursor: pointer;
        }
        
        .button:hover {
        background-color: #f5e507;
        color: #182939;
       }
        
        .button:focus {
        outline: none;
       }

        .button:active, .active {
            background-color: #f5e507;
            color: #182939;
            outline: none;
        }

        @media (max-width: 480px) {
            .button-group {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }

            .button {
                display: none;
            }

            .dropdown {
                display: block;
                width: 100%;
                margin-top: 10px;
                padding: 10px 20px; 
                border-radius: 14px;
                border: none;
                background-color: #182939;
                color: white;
                font-family: 'Inter', sans-serif;
                font-size: 15px;
                cursor: pointer;
            }
        }

        @media (min-width: 481px) {
            .button-group {
                display: flex;
                justify-content: left;
            }

            .dropdown {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="button-group">
        <button class="button active" onclick="runButton1Script()">Button 1</button>
        <button class="button" onclick="runButton2Script()">Button 2</button>
        <button class="button" onclick="runButton3Script()">Button 3</button>
        <select class="dropdown" onchange="runDropdownScript(this.value)">
            <option value="button1">Button 1</option>
            <option value="button2">Button 2</option>
            <option value="button3">Button 3</option>
        </select>
    </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');
            });
        });

        function runDropdownScript(value) {
            switch(value) {
                case 'button1':
                    runButton1Script();
                    break;
                case 'button2':
                    runButton2Script();
                    break;
                case 'button3':
                    runButton3Script();
                    break;
                default:
                    break;
            }
        }
    </script>
</body>
</html>
3 Likes
#6

Amazing work Matthiew, this is much needed as you can see from my picture!

I wanted to ask, is there a way for a tab to display multiple lists? So for example, tab1 displaying “list 1”, “list2” and “list3” for example?

#7

Yes! you just need to play with the ‘none’ / ‘block’ lines of the code

1 Like