Tab Switching With CSS & JS

I was working on a client’s site and they wanted a feature that would change content at the click of a button. This similar to an Accordion or Tabs switcher provided by block plugins like Stackable or Ultimate Addons for Gutenberg. I could not find a single-purpose plugin, and did not want to add a full-featured plugin just for one type of block. I also wanted to learn a bit about how do tab switching with CSS and JS.

What is Tab Switching?

Similar to an Accordion block, clicking on a different selector will display different content. Often used for FAQs, it’s great for offering different content for different people. Below is an example where I used JS to toggle the CSS for several blocks, revealing the desired block while hiding the others:

FIRST

LAST

The Tab Switching Blocks

Thanks to Gutenberg Blocks, I can put most the necessary elements for tab switching with CSS & JS into the same block. In this case, the first block in the container is Custom HTML, followed by a Heading. The HTML code for the buttons is below.

Div Class is the CSS container for the buttons. It keeps the buttons on the same line.
Button has a class for formatting: “bclass” for the shape, since first is rounded on the left, and last is rounded on the right. “bnext” isn’t used, but it’s there if you want to do something special for the middle buttons. I originally had left and right borders, but it did not look good with vertical dividers between buttons.
Then the onclick trigger for the JS

<div class="selector"><button class="bfirst active" onclick="myFirst()">First</button><button class="bnext" onclick="myNext()">Next</button><button class="blast" onclick="myLast()">Last</button></div>

Here is the view of my Page Editor. The Columns / Container are the three blocks I’m toggling.

Each Container has a unique CSS class added to it:

The CSS Portion

As I’ve mentioned before, I use Blocksy, so it makes it extremely to add on-page custom code snippets. I added Style to the header, and Script to the footer.

For the Style portion, I added the following:

mynext and mylast are set to display: none so they are hidden when the page loads.
selector, as I said earlier, it to keep the buttons on the same line.
button is the general styling for all buttons.
button .first and .last are rounded on the ends.
button: hover is to change the text color.
button.active is to change the text color for the active tab button.

<style>
.mynext {display: none;}
.mylast {display: none;}
.selector {display: flex; margin: auto;}
button {font-size: 18px; padding: 10px; cursor: pointer;border: none; background-color: #000033; color: #999999;}
button.bfirst {border-radius: 5px 0px 0px 5px;}
button.blast {border-radius: 0px 5px 5px 0px;}
button:hover {color: white !important;}
button.active {color:white; background-color: #3A4F66; }
</style>

The JS Portion For Switching Tabs

The following are blocks of script that correspond with each of the tab-switched sections. Each block does the following:

Function name that corresponds with each button’s onclick.
Set variables for each section’s CSS Class.
Toggles Display to show the selected block and hide the others.

<script>
function myFirst() {
  var first = document.querySelector('.myfirst');
  var next = document.querySelector('.mynext');
  var last = document.querySelector('.mylast');
    first.style.display = "block";
    next.style.display = "none";
    last.style.display = "none";
}
function myNext() {
  var first = document.querySelector('.myfirst');
  var next = document.querySelector('.mynext');
  var last = document.querySelector('.mylast');
    first.style.display = "none";
    next.style.display = "block";
    last.style.display = "none";
}
function myLast() {
  var first = document.querySelector('.myfirst');
  var next = document.querySelector('.mynext');
  var last = document.querySelector('.mylast');
    first.style.display = "none";
    next.style.display = "none";
    last.style.display = "block";
}
</script>

Final Notes on Tab Switching With CSS & JS

As I mentioned, “First” and “Last” sections are fine the way they are. My demo has a “Next” section for the middle. You can either remove it if you have only two sections. If you need more than three sections, you will need to duplicate the “Next” section and use recommended names of “Second”, “Third”, and so on, instead of “Next”.