Create a Sliding Tabbed Panel with jQuery
Video: Previewing the final projectBuild a dynamic sliding tabbed panel from scratch using a combination of HTML, CSS, and jQuery.
- Where to go from here
- 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
Previewing the final project
Hi! I am 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 tabbed 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. So if you'd just like to stop at this point in the course with the generic style to apply your own design to, you can, or you can come in here and we can create more customized designs.
And at the end of the course we're going to talk about some of those progressive enhancement techniques and how we can apply some of those to earlier courses I have in the lynda.com online training library. So I hope this course sounds interesting to you, and if so, let's get started.
There are currently no FAQs about Create a Sliding Tabbed Panel with jQuery.