Create Your Own Custom Tabbed Content

So you want to create your own tabs, eh? Recently a group member asked about creating their own tabbed content using images as the tabs. I posted the generic code needed to achieve the effect but decided it would make a neat little tip to put on the site as well.

Tabbed content is great for formatting groups of text into one neat, easy to read area.

And although there is speculation that Google will discount hidden text in its rankings, the majority of uses for tabs shouldn’t be in SEO critical pages anyways.

To start, I created two sections. In the first section I gave an ID of tabsection and created one row with four columns. I each column I placed the image I wanted to use. The row has column container disabled, and marginless columns enabled.

For the second section I gave an ID of textsection and created 4 rows to correspond with the 4 tab images. The content of these rows could be anything, but I stuck with a headline and text for simplicity. And the last 3 rows I gave the custom class hidden to hide them by default. I also disabled column container in order to maintain their horizontal position during the fade effect.

The following CSS is used to style the tabs:

I’ve used comments to make it easier to understand. What we are essentially doing is animating the rows with position and transitions. In the hidden class, we set an opacity to fade the text. If you prefer a sliding effect, simply replace that line with a top or left: -100%;

The custom jQuery needed is quite small and simple:

Index and eq are the magic functions in our javascript.

Instead of setting up a listener on each tab, we’re able to listen to the parent row and count which tab was clicked on, and apply the class to the corresponding row in order thanks to them.

Of course, there are dozens of way you can achieve custom tabs, this is just one way that I thought was easy to set up in X Theme. Hopefully, you find it useful!