Create Your Own Custom Tabbed Content

X Theme and Pro Theme23 Comments

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.

Skeleton Layout for custom tabs

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!

Demo of your custom tabs

23
Leave a Reply

avatar
  Subscribe  
Notify of
Huntfitter
Huntfitter

Trying to accomplish this, but I believe I’m missing something…I’ve noticed in my tabbed content, I didn’t have hover links, whereas in the demo, you do…Also, how are you calling the specific text content? Are you doing this by giving making the images links, then giving them #ID’s that correspond with the ID of the text content?

Michael Bourne

Nope, no links needed, just the instructions above and the JS and CSS. The order of the columns in the first section will correspond to the order fo the rows in the second thanks to the JS. Just give the sections the appropriate IDs and you’re good to go.

Huntfitter
Huntfitter

Yeah, I go it to work…However, I’m using images in the text rows..When I select one, the image jumps a bit. R Anger said that it might possibly be because of the position:absolute in the hidden section? Here’s a link. http://109.199.111.197/~axentweb/test/window-tinting/

Michael Bourne

All code should be tweaked for specific use cases, of course. In your example, I would set #textsection .x-container to position: absolute, and add a height of 340px to #textsection

Huntfitter
Huntfitter

Works Perfectly. Thanks so much!

Jodi Deutrom
Jodi Deutrom

This was awesome. Really appreciated your help and it’s made my site look great. Thanks!

bu
bu

Hi there, I’m trying to achieve this style (no bacon just text boxes) on the left. Is it possible to get the code to do that?

Julian
Julian

Hey thanks for this! I was able to accomplish this pretty easily and it looks/functions great. Quick question though, is there anyway to link to having a specific tab open? For example, if someone clicks on url(.co)/#pastrami , it will open up on pastrami instead of the default bacon.
Also, is there a way for when someone clicks on an image, the page scrolls down to the content?

Thanks again!

Jaime

Hi Michael,

Thank you very much for sharing! I’m wondering how could I set up the content to close upon click on the same tab.

Keep up the good work.

Regards,

Jaime

Charlie Pryor

Excellent share thanks! – The only issue I have with it though is that it’s totally broken for mobile. The tabs don’t respond at all. Any fix?

roy@royanger.com

Do you have a link? We’ve used it on mobile without issue, so we would need to figure out what’s happening.

Skeeter Harris

Hi Michael,

This is really very cool and thanks for sharing this. It was very easy to recreate this on my site but I’m having one issue – in that when the page first loads all the content in the textsection appears until the user clicks one of the images in the tabsection. I added the ID’s at the section level for both text and tab and from row 2 – 4 added the id hidden but must have missed something. Any ideas?

Skeeter Harris

Hey Micheal, I need a bit more advice as I am running into the following:

I have implemented the custom image tab on the following two pages. But what I am running into is that each tab has a video yet they all want to play the far video on the right hand side (tab 4) verse the tab that is exposed. Any Ideas on how to fix this?

http://298.e0e.myftpupload.com/who-we-serve/
http://298.e0e.myftpupload.com/services/