Update to unofficial Tabs feature: Full customizable buttons + Responsive

Custom Coding
, ,
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 do to make it fully responsive? (Buttons to dropdown menu)

Enter this code in a custom code block (if you used the not responsive version, replace everything by what’s below)

<!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>

<script>
    // hide blocks 
    window.addEventListener('DOMContentLoaded', (event) => {
        document.getElementById("table2").style.display = "block";
        document.getElementById("form2").style.display = "none";
        document.getElementById("chart2").style.display = "none"
    });

    function runButton1Script() {
        document.getElementById("table2").style.display = "block";
        document.getElementById("form2").style.display = "none";
        document.getElementById("chart2").style.display = "none";
        document.getElementById("table2").scrollIntoView("table2");
        console.log("Button 1 clicked"); 
    }

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

</script>
</html>
5 Likes