Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Now, to add content for these panels, we're going to come over to our snippets. So in Dreamweaver come up to the File menu, choose Open. Locate your Exercise Files. Go into folder 2 called Snippets and open up A-panel-content.html, then click Open. So inside of here I have just some content about some of my other lynda.com courses that we can cut and paste into the individual panels. So the very first panel, which is for the iPad, let's come over here and copy the h2 all the way up through the ending paragraph tag.
Let's copy that to the clipboard. Let's come back to index.html and inside of panel_content for the first panel, let's tab in and let's paste all of that content. I'm going to format this a little bit as well; I'll just select these lines, hit the Tab key, and just tab these in so that these three elements here all line up. Let's come back to our panel_content. Let's scroll down to the content for the video Panel. Select from the h2 all the way up through the ending paragraph tag, copy that. index.html.
Let's come back and find the second panel. Let's tab in and paste all of that content. Again, I'm going to format this as well, to line up all of the element tags. Let's scroll down. This is our third panel. Let's come back to our snippets. Let's scroll down and find all of the content for the photography panel. Select all of this, copy to the clipboard. Back to index.html. Inside of panel_content for the third panel, let's paste all of that content.
So with all of our content in place, let's switch back to Design view. Now, inside of Design view, we'll see all of the content that we just added. We can see our tabs up here inside of a div, and Dreamweaver shows us the divs with a dotted line, and then we can see our three individual panels here as well. So, now with all of our content containers in place and all the content inside of those containers, we're ready to start doing some CSS.
There are currently no FAQs about Create a Sliding Tabbed Panel with jQuery and Dreamweaver.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.