Change tabs dynamically with GenerateBlocks


When GenerateBlocks 1.7 was released, it came along with some new blocks. One of which was a tabs block. This was a really nice addition and makes it super easy to build tab style layouts and sections for new websites.

On SnippetClub in the account area, I had created my own tabs functionality, however it was a little hacked together and didn’t look great in the backend. So when I updated the website, I decided I would retire my hacky solution for the new Tab block.

Something that I had setup with my previous solution was the ability to link directly to a tab using hash links in the url. As well as the ability to click on any element and automatically switch to that tab.


This tutorial shows you how to:

  • Link directly to a tab
  • Change tabs on hover
  • Change tab by clicking on another element

1. Setting up the page

First we need to insert the tabs block. I am going to be recreating my SnippetClub dashboard.

screenshot 2023 03 02 at 00.29.34

Adding our target class

For this to work dynamically for any tabs element, we need to add a target class. This is what our code is going to use to determine which tabs blocks we should be changing, incase we have multiple tabs on the same page.

In the structure panel, select the main tabs wrapper that holds the Tab Buttons and the Tab Items.

We need to add a class to this block. In my case, I am going to use the class dashboard.

screenshot 2023 03 02 at 00.31.46

2. Adding our function

We next need to create a javascript function which we can re use and call whenever we want to change tabs.

Members content only

Become a SnippetClub member to gain instant access to this tutorial plus tons more premium content.

Already a member? Log in below.

Login Form

👋🏻 Weekly Tutorial Digest

I send out a weekly newsletter with links to new tutorials written in the last week, you can subscribe below.


🔒I won't send you spam, I promise