Help with tabs!

Hey guys! was wondering if there was a way that when one tab is clicked, the design of the background and color of other tabs/sections can change? I feel like this is very simple yet I just can’t figure it out. I’ve put an example below from NVIDIA’s website below. As you click through the tabs, the colors and text colors change.


Here is my public share link: LINK
(how to access public share link)

Alright. This whole process usually involves a bit of CSS and JavaScript. Essentially, you set up event listeners for your tabs. When a tab is clicked, these listeners trigger a function that changes the styles of your tabs and sections. For the background and text colors, you’d typically toggle different CSS classes based on the active tab.

If you’re not super comfortable with coding, there are also website builders and plugins that offer this functionality with less hassle. Plus, there’s a ton of tutorials online that can guide you step-by-step.

Good luck!

Lucas nailed it. I’ve a few tools that might help you on your way.
SA5 has a lib for extending the capabilities of WF’s tabs element. One of the features is a tab-switched callback, so it’s easy to drop in your code, which looks like this;

<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['tabChanged', 
  (tabs, index) => {

    switch(tabs.name) {
      case "demo1": // Demo 1 tabs changed

        break;
      case "demo2": // Demo 2 tabs changed

        break;
    }

  }]); 
</script>

To apply your styles, your custom code can add/remove classes to the elements you want, like Lucas suggested. That’s a nice approach because it lets you manage your styling in the designer.

Alternatively for geekier stuff, if you’re good with custom CSS, you can assign each tab a custom <style> block, and then you switch them on and off, depending. To suppress them, you can wrap/unwrap them in comments ( using your code ), or you can change the element name to e.g. <style-disabled> I use custom attributes to locate the elements to change, e.g. tab-style="tabname1", then your code looks for all <style> elements with a tab-style attr and disables them, then looks for all <style-disabled> elements with tab-style=clicked-tab and enables just that one.