Build a dynamic sliding tabbed panel from scratch using a combination of HTML, CSS, and jQuery.
- [Voiceover] Hi, I am Chris Converse and in this course we're gonna be building a sliding tab panel for your website. I want to start by showing the final project. We're going to be creating this tabbed panel here, where when I click on individual tabs the content inside is gonna swipe back and forth to animate to the content that corresponds to the tab. We're also gonna set it up so that you can start on a particular tab. So, if I come up here and hit Reload, we're going to actually start this on the second tab, and we'll show you how to set this to any one of the tabs. We're also going to build a styled version of this, as well.
- Creating the main panel and tab containers
- Adding content to the containers
- Adding CSS styles to the text and tabs
- Adding the jQuery $(document).ready() function
- Assigning click events to the tabs
- Setting an autostart on page load
- Creating custom graphics for the panels
- Assigning custom classes to the HTML elements