Create Your Own Custom Tabbed Content

Michael BourneUpdated:


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.

View Demo Here

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:

/** flex the tabs to make the shrink down for mobile **/
#tabsection .x-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
#tabsection .x-column {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
/** remove the margin and use a pointer mouse cursor to resemble a link **/
#tabsection img {
  margin: 0;
  cursor: pointer;
/** set the text section to relative and hide the overflow **/
#textsection {
  position: relative;
  overflow: hidden;
/** set each content row to relative, set an opacity,
and use a transition to animate the tabs **/
#textsection .x-container {
  position: relative;
  top: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-perspective: 1000;
          perspective: 1000;
  -webkit-transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
/** create the .hidden class and set the rows to absolute to remove them
from the container, and opacity to 0 to fade them out. **/
#textsection .hidden {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  z-index: -1;
  -webkit-transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);

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:

$('#tabsection .x-container').on('click', '.x-column', function(){
   var textshow = $(this).index('#tabsection .x-column');
   $('#textsection .x-container').addClass('hidden');
   $('#textsection .x-container').eq(textshow).removeClass('hidden');
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

View Demo Here

Have a question or a comment about this article? Click here!
About the Author

Michael Bourne


Hey, I'm Michael, and I've been making websites since the mid 90s! These days I focus on Wordpress and would call myself quite handy in PHP, JS, and CSS. Outside of coding and web design, I'm quite fond of craft beer and backpacking around the world.

Share this Tip!