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 master the art of leveraging premade JavaScript libraries by implementing Tabby, a lightweight, accessible vanilla JavaScript library designed to create elegant tabbed sections within web pages.

Premade JavaScript libraries represent one of the most powerful tools in a developer's arsenal—they're battle-tested code written by experienced developers that you can integrate into your projects immediately. Whether you're a seasoned programmer or just starting out, libraries like Tabby save valuable development time by eliminating the need to reinvent the wheel. The key to success lies in choosing well-documented libraries with active community support. A library's ease of implementation often directly correlates with the quality of its documentation and the developer's commitment to explaining their architectural decisions.

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.

   You'll notice this page contains substantial content that would benefit from better organization. We're going to transform this information-heavy layout into three distinct tabbed sections, dramatically improving the user experience by allowing visitors to focus on the specific information they need without visual overwhelm.

4. Leave the page open in the browser so we can observe our changes in real-time as we implement the tabbed interface.

Linking to the Script's Files

We've included the complete Tabby library files in our class materials for convenience, but in real-world development, you'd typically download the latest version from GitHub.com/cferdinandi/tabby. This repository serves as an excellent example of professional open-source documentation—you'll find comprehensive setup instructions, live demos, and detailed API documentation. Pay particular attention to the dist folder (short for distribution), which contains the production-ready files optimized for deployment.

Tabby's minimal footprint is one of its key advantages—at its core, it requires only a single JavaScript file to function. While the library includes an optional CSS file for basic styling, you maintain complete control over the visual presentation. We'll use their CSS as a foundation while preserving the ability to override any styling with our custom CSS. This approach follows the cascade principle: by loading their CSS first, our subsequent styles will take precedence when conflicts arise.

1. Back in your code editor, above the link to main.css, add 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: The .min extension indicates this file has been minified—a crucial optimization process that removes all non-essential characters (whitespace, comments, verbose variable names) to reduce file size and improve load times. In production environments, minified files can reduce bandwidth usage by 20-40% compared to their uncompressed counterparts.

2. Next we'll link to the Tabby JavaScript file. Following best practices, add this script tag at the bottom of the document, just before the closing body tag:

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

   Placing JavaScript files at the bottom ensures the DOM is fully constructed before scripts execute, preventing potential rendering delays and ensuring optimal page load performance.

3. Save the file and prepare for the next phase of implementation.

Adding the HTML Structure

Now we'll implement the semantic HTML structure that Tabby requires to function properly. This approach demonstrates how well-designed libraries work with standard HTML patterns rather than requiring proprietary markup.

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

   This file contains the complete HTML structure needed for tabbed functionality: an unordered list (<ul>) that serves as the tab navigation, and corresponding <div> elements containing each tab's content. This markup pattern follows web accessibility standards and provides a logical fallback structure if JavaScript fails to load.

   In professional development, you'd typically copy this boilerplate directly from the library's documentation. We're providing local files to ensure consistency during this tutorial, but always refer to the official repository for the most current implementation patterns.

2. The content for each tab has already been prepared and integrated into the page—this eliminates repetitive copying while allowing us to focus on the technical implementation details that matter most for your learning.

   Copy the complete 5-line <ul> structure (including all nested <li> tags) from the markup file.

3. Switch back to product.html in your editor.
4. Locate line 32 where you'll find the comment <!—Overview Content—>.
5. Paste the tab navigation structure directly above this comment marker.

6. Now customize the navigation labels to match our product page content structure:

   <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. Understanding the connection pattern is crucial for successful implementation:

   • Each href attribute begins with #, indicating it targets an element with a corresponding ID attribute.
   • The page already contains three content divs with unique IDs: overview, reviews, and questions. You can verify these by examining the HTML structure below the tabs.

8. Update the href attributes to correctly link each tab to its corresponding content section:

   <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>

   The data-tabby-default attribute designates which tab should be active when the page loads, providing users with a clear starting point.

9. Save your changes and refresh the browser to observe the current state.

   You'll notice three navigation links are now visible (Overview, Reviews, and Q & A), but they appear as standard hyperlinks rather than functional tabs. This is expected—we haven't yet initialized the JavaScript functionality that transforms these elements into an interactive tabbed interface.

Initializing Tabby

With all the necessary files linked and HTML structure in place, we're ready to activate Tabby's functionality. This process demonstrates how modern JavaScript libraries use constructor patterns and data attributes to create interactive components from semantic HTML.

1. Return to your code editor to implement the initialization script.
2. From the snippets folder, open initialize-tabby.js to access the prepared initialization code.

3. Select and copy the complete JavaScript initialization code.

   NOTE: This code creates a new Tabby instance that automatically scans the document for elements containing the data-tabs attribute. Once initialized, Tabby sets up event listeners and accessibility features, transforming static HTML into a fully functional tabbed interface with keyboard navigation support built-in.

4. Switch back to product.html for the final implementation step.

5. Add the initialization script immediately after the Tabby library link:

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

   This script must be placed after the library file to ensure the Tabby constructor is available when we attempt to initialize it.

6. Save your changes and refresh the browser to see the transformation.

   The navigation elements now display as professional-looking tabs with visual states and smooth transitions. Click each tab to experience the seamless content switching—notice how the URL updates to reflect the active tab, enabling direct linking to specific sections.

Testing Out the Keyboard Navigation

One of Tabby's most valuable features is its built-in accessibility support. Modern web development demands interfaces that work for all users, regardless of their preferred input method or assistive technology needs. Let's explore the keyboard navigation features that make this interface truly inclusive.

1. Press your Tab key to highlight the first interactive element on the page, which should be the Hipstirred logo in the navigation.

   NOTE: Safari users need to enable keyboard navigation in preferences, or use Option–Tab as an alternative.

2. Continue pressing Tab to cycle through interactive elements until the Overview tab receives focus, indicated by a visible focus outline.
3. With a tab focused, use your Right Arrow key to navigate to the next tab in the sequence.

4. Test the Left Arrow key to move to the previous tab in the navigation.

   This arrow key navigation pattern follows established accessibility guidelines (ARIA Authoring Practices) and provides an intuitive experience for keyboard users, screen reader users, and anyone who prefers keyboard navigation for efficiency.