Build a dynamic sliding tabbed panel from scratch using a combination of HTML, CSS, jQuery, and the tools in Dreamweaver.
- [Voiceover] Hi, I'm Chris Converse, and in this course, we're going to 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 tab panel here, where when I click on individual tabs, the content inside is going to swipe back and forth to animate to the content that corresponds to the tab. We're also going to 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