Using a JavaScript Library: Tabs

Topics covered in this JavaScript tutorial:

Using premade JavaScript Libraries, Creating tabbed sections within a webpage

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to use a premade lightweight, accessible vanilla JavaScript called Tabby to create tabbed sections within a webpage.

Premade JavaScript libraries are code some someone else wrote which you can use. It doesn’t matter whether or not you know enough JavaScript to create the same functionality, libraries save you time and effort because the hard work is already done. How easy they are to use depends on how well the developer has documented the project so others can understand their work.

Getting Started

1. For this exercise we’ll be working with the Tabs folder located in Desktop > Class Files > JavaScript Class. Open that folder in your code editor if it allows you to (like Visual Studio Code does).
2. In your code editor, open product.html from the Tabs folder.

3. Preview product.html in a browser.

   This page has a lot of content on it, which we want to organize into 3 tabbed sections so users can more easily find what they’re looking for.

4. Leave the page open in the browser so we can come back to it later.

Linking to the Script’s Files

We’ve included the Tabby files in our class files, but you can also visit github.com/cferdinandi/tabby to download it, read the documentation, and see a demo. Please note that (as with many repositories you’ll find) the code you’ll use is found in a dist folder, which is short for distribute.

At a minimum, Tabby requires just one file to run—its JavaScript file. Additionally we can use a CSS file they provide, or use our own CSS instead. We’ll use their CSS file, so let’s start by linking to it. It’s important to link to their CSS before our custom CSS. This way our CSS code will override any styling in their CSS should we need to.

1. Back in your code editor, above the link to main.css, link to the Tabby CSS file as shown in bold:

      <link rel="stylesheet" href="js/tabby/css/tabby-ui.min.css">
      <link rel="stylesheet" href="css/main.css">
   </head>
   

   NOTE: Files with .min in their name have been minified. That means extra code that users don’t need has been removed to make it the smallest possible file size. This can include removing spaces, tabs, line breaks, and comments… all which add file size.

2. Next we’ll link to the Tabby JS file. At the bottom, just before the end of the body tag, add the following bold code:

      </div>
      <script src="js/tabby/js/tabby.min.js"></script>
   </body>
   

3. Save the file.

Adding the HTML

1. From the snippets folder, open tabby-markup.html.

   This is all the HTML needed to make the tabs (which are the <ul>) and the content for each tab (which are the <div> tags).

   This code was copied directly from the Tabby GitHub page, which is normally where you’d be copying the code from. The only reason we’re providing local files for you to copy/paste from is we never know if someone’s website will change.

2. We have already added the content for the tabs to this page, because they contain so much text and we didn’t want you to have to do a bunch of mindless copying and pasting.

   So all you need to add is the tabs themselves. Copy the 5 lines of code for the <ul> (with the <li> tags inside)

3. Switch back to product.html.
4. Around line 32 find <!-- Overview Content -->.
5. Paste the tab code just above that comment.

6. Now we must change the content to make it appropriate for our page. Change the text as shown below:

   <ul data-tabs>
      <li><a data-tabby-default href="#harry">Overview</a></li>
      <li><a href="#hermione">Reviews</a></li>
      <li><a href="#neville">Q & A</a></li>
   </ul>
   <!-- Overview Content -->
   

7. Notice the following:

   • The href (links) start with # which means they refer to an ID.
   • Our page already has 3 divs, each with a unique ID (overview, reviews, and questions). You can see them below the tabs you just pasted.

8. We must link each tab to the ID we gave each section of content. Change the links as shown below in bold:

   <ul data-tabs>
      <li><a data-tabby-default href="#overview">Overview</a></li>
      <li><a href="#reviews">Reviews</a></li>
      <li><a href="#questions">Q & A</a></li>
   </ul>
   

9. Save and reload the page in the browser.

   Notice that we have 3 links (Overview, Reviews, and Q & A), but they do not look or work like tabs. That’s because we haven’t told the Tabby JS to work on them!

Initializing Tabby

We’ve linked to all the files, so we’re ready to initializes Tabby. We’ll start with a prepared code snippet we got from the documentation on the Tabby website.

1. Switch back to your code editor.
2. From the snippets folder, open initialize-tabby.js.

3. Select and copy all the code.

   NOTE: This code creates a new custom event that is defined in the Tabby JS file. It will use event listeners to look for tabs inside a list that will have a data-tabs attribute (which you’ll see in a moment).

4. Switch back to product.html.

5. Paste the code below the link to the Tabby JS file, as shown in bold:

      </div>
      <script src="js/tabby/js/tabby.min.js"></script>
      <script>
         var tabs = new Tabby('[data-tabs]');
      </script>
   </body>
   

6. Save and reload the page in the browser.

   The tabs now look like tabs! Click the to see they work.

Testing Out the Keyboard Navigation

Tabby adds keystrokes to navigate between tabs, to keep the content accessible to those who can’t (or don’t want to) use a mouse.

1. Hit your Tab key to highlight the first clickable thing in the webpage, which should be the Hipstirred logo.

   NOTE: If Safari you’d have to hit Option–Tab.

2. Hit Tab several more times until the Overview tab is highlighted.
3. While one tab is highlighted, use your Right Arrow key to move to the next tab.

4. Then try the Left Arrow key to move to the previous tab.

   Cool!