Tag Archives: tabs

Episode 9: Animated Tabs

Animated Tabs

In Episode 4, we learned how to create simple tabs without using a jQuery plugin. In today’s episode, we’ll make those tabs even spiffier by adding a cool animated transition when switching tabs.

We’ll get started with the code we created in Episode 4, which you can download from GitHub.

The HTML will remain exactly the same. In the CSS, we just have to make one small change – by moving styling from the individual <div>s with a class of .tab and instead applying those styles to the <div> that wraps the collection of tab content <divs>s.

The rest of the changes happen in our JavaScript. And even most of that stays the same. We just remove the single line of code that handled the hiding and showing of the different sections of tab content, then write a new couple lines of code to add the animation.

We’re actually combining three animations. When we click a new tab, first we fade out whatever content happens to be visible at the time. Next, we animate the height of the container to match the height of the new tab content section. Finally, we fade in the content of the new tab container.

Combined, these three animations provide a smooth transition between the content of the different tabs. It’s a little extra something something that helps our websites feel more polished and professional. Thanks to jQuery adding this kind of extra bit of polish is simple and straightforward.

In this video, we take our first look at jQuery’s animate() method, and we also use a callback function for the first time. We’ll dig more into animation and callbacks in future episodes, so stay tuned!

Episode 4: jQuery tabs without a plugin

jQuery Tabs without a plugin!

There are piles of jQuery tabs plugins out there, but creating tabs is not very complicated at all. In this video, I’ll step you through creating simple tabs with just a few lines of code.

We’ll create a page featuring the six noble gases with a bit of information about each one. We’ll pull a bit of information from Wikipedia for each gas.

We get started by setting up our HTML – first we create the content for each tab section, giving each section of content a unique ID so that we can easily reference it later. Note that we use semantic names for those ID’s related to the information contained inside rather than just numbering the sections – that means it’s super easy for us to re-arrange the order of our content as needed without having to worry about re-naming.

Then we create the tabs themselves – which is as simple as an unordered list with anchor links to the sections of content we created. We style that up with just a few lines of CSS to make the list of links look like tabs and to add a background color and border to each section of content. We’ll cover a quick trick for improving the usability of your tabs which will also help you with all sorts of navigation, buttons, and more.

Once we’ve got all of that out the way, we’ll jump into JavaScript. First, we hide all the content sections. Then, we write the magical code that will make the tabs work as expected. While we’re doing that, we learn about hashes and do a quick lesson on how to move around an HTML document. We also learn about how we can interrupt the browser and prevent its default behavior when we need to.

Next, we take a look at how to highlight the currently selected tab by adding and removing a CSS class. Finally, we add just a bit of code to show the first content section when the page is first loaded.

Before we wrap up, we’ll quickly cover caching selectors to help your code run a bit faster. Little improvements make a big difference once you start writing more complex JavaScript, so it’s a good idea to learn optimization early! Make it a habit to watch out for any time you’re using the same jQuery selector more than once in your code.