Join Chris Converse for an in-depth discussion in this video Beginning the project, part of Creating a Sliding Tabbed Panel with jQuery.
Now, to begin our project, let's create a folder on the desktop. …We'll call this mySlidingPanels. …I'm just going to open this up and resize this a little bit. …Now, with our project folder created, let's come back to the exercise files. …Let's open up folder 1, called Files to add. …Let's select the images directory, the includes directory, and the index.html file, and let's …drag a copy of these into the project folder we created on the desktop. …So once all of these are in place, we'll come back to the exercise files.…
Let's close up folder 1. …Now that we have all of our starter files in place, we can start editing the HTML. …
- 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
Skill Level Intermediate
1. Creating the HTML Containers
2. Styling the Tabs and Panels
4. Creating Custom Graphics
5. Customizing the Panel Styles
6. Adding Progressive Enhancement Techniques
Where to go from here1m 15s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.