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

Guides & Help Docs
, ,
26

Hi Ilan!

I was waiting for this request anxiously :joy:.

Tough one but I succeeded. I chose a dropdown menu, which would be the best for UX purpose, IMO.
Here is the demo (to be viewed on mobile): https://test-play.softr.app/tabs-with-custom-buttons-responsive

Note that for what is following I am using the customizable buttons version.

You can find the details of this version here in the community: Update to unofficial Tabs feature: Full customizable buttons + Responsive

Here is the new code to have a dropdown when on mobile
Insert it a custom code block, above the blocks you want to display. These are hard coded buttons, not CTA block 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