Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Welcome back to our Accordion widget exercises. Now, other than adding or deleting panels, Dreamweaver doesn't give us a lot of options to control how our Accordion widget behaves. So in this exercise, we'll change our panel heights to reflect the actual content inside and change which panel displays by default. So just to review really quickly, we'll go ahead and preview this in the browser again, and I'll scroll down. Notice that the Image panel loads first, and then the Painting Information loads and A Note from the Artist loads. Well, they are all of the same height and we passed that in through cascading style sheets in the last exercise. So they are all exactly 250 pixels tall. Well, that's way too tall for the Painting Information. It's just about right for the Note from the Artist, but the image, not even close.
Now click in the image. Now, if we look at the Tag Selector, we see that our image is actually surrounded by a paragraph tag and that's causing a bit of an issue. We made the image tag a block level element, and then assigned some padding to it. Well, it's wrapped up in a paragraph tag which is actually throwing additional padding on it, and that's causing the image to slide way too far over to the right. So, using the Tag Selector, I am simply going to either right-click or on a Mac, Ctrl- click on the Paragraph tag, and I am just going to choose Remove Tag and that will remove that extra bit of padding and now our image is going to show up exactly the way we need it to.
So, there's a little bit of an error there. That when we test this, the text is hidden until somebody refreshes it. What this will do for us is it will make sure the image and the text is hidden first and to view it, somebody's going to click it, it will reset it, and they'll never see that problem. So we'll go ahead and save our file, test this in a browser. And as I scroll down, notice that A Note from the Artist is the first thing that opens up. If I click on the image, it expands to not only show the image but the text underneath it so it uses exactly the height it needs and then Painting Information animates into its place and uses just the height it needs. So, we can see that each of these panels has a variable height and that's a really neat effect.
Get unlimited access to all courses for just $25/month.Become a member
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.