Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Our Accordion widget is now functional but it doesn't look all that great. So in these next series of exercises we will explore how CSS can control not only our Accordion's appearance but also how it functions. To understand how our styles can control our Accordion we need to first understand the structure of the Accordion. So I am still in the current.htm exercise file and I am just going to click inside my Accordion, really kind of anywhere and switch over to Code View. So that should jump us down and if you happen to be above or below it, the Accordion starts on about Line 58.
So notice that Dreamweaver adds a div tag with 90 of Accordion one and gives it a class of Accordion. After that, we have a repeating structure. We first have a div tag with the class Accordionpanel, then we have a div tag with the class AccordionpanelTab. That's the tab that goes across the top. Underneath that, we have a div with the class AccordionpanelContent. That's of course, where all our content is. Then the AccordionpanelTab closes out and it starts all over again for each panel in your Accordion. So those are the styling hooks that Dreamweaver uses in order to create Cascading Style Sheets to control not only look and feel but also the functionality of this. You are free to change those class names if you have got something in your own Style Sheets that you want to use and you rather style them yourself, you can change those names. If you are going to change those class names however, you need to be aware of the fact that there are four class names that you cannot change physically on the page. Those are Static Classes and you are going to have to pass in some Variable information into the constructor function in order to change them and I am going to bring up a slide that's going to describe those classes to you.
So other than the class names that I pointed out to you within the Accordionpanel structure, there are four class names that Dreamweaver is going to create styles for that you can't exactly select. They are AccordionpanelTabHover, AccordionpanelOpen, AccordionpanelClosed and AccordionFocused. As you can probably surmise from this, they actually describe different states of the panels and the Accordion in itself. You have got to hover over the tab attribute whether a panel is open or whether a panel is closed or whether the Accordion widget is in a focused state.
Now since you can't actually select that and change it, the only way to change those class names, if you are going to change the class names of everybody, is to actually pass variables into the Constructor function. And on the slide towards the bottom here, we have a section of codes that's going to show you how to do that. Just to sort of decipher this code for you, you will find this code in any page where you have an Accordion widget. The var keyword is actually naming the Accordion so if you change its name, and we haven't changed our name but if you change its name to in this case acc2, that's what you would see there.
Then you are going to see = new Spry. Widget.Accordion. It will first pass in the name and typically that's all you are going to see within the constructor function. But if you want to change your class names, this is how you do it. You type in a curly brace and after that you pass on hoverClass and then you pass in the name that you want for that, in this case, we are using just hover. Then openClass, closedClass and focusedClass. So the values that you see in quotation marks, "hover" "open" "closed" or "focused" that would be whatever the class name that you are looking for would be. So if you are going to go ahead and change these class names into something that you are driving, you need to be sure to go ahead and pass these along too into the constructor function.
So we know that we can change these names but for the purpose of this exercise, we are just going to leave the names at their default. Now I want you to go look at your CSS Styles panel and I am probably going to roll up most of my panels and expand this so I can kind of see what is going on here. In addition to our regular CSS Styles, which is our shows.css, up top you will see a link to another style sheet that we didn't create, SpryAccordion.css. Anytime you use one of the widgets whether it is one of the tab panels or the Accordion, Dreamweaver is going to create an external cascading style sheet file that's going to hold all the styles that controls and styles that particular widget.
It is not going to integrate it with your own styles and there is nothing wrong with that. Different people use different style deployment strategies and rather than trying to guess where you would like these styles, Dreamweaver merely places them in an External Style Sheet. They don't have to stay there and as a matter of fact, I would actually recommend grabbing these styles and then bringing them into your own Style Sheets so that you can modify them and maintain them without having to deal with a lot of External Style Sheets that you don't necessarily need. So I am going to go ahead and using my CSS Styles panel, I am going to double click the SpryAccordion.css to open up those styles. Now by double clicking it, it is going to open up this file and one of the things that you are going to notice right off the bat is there is a lot of commenting inside the CSS file and that's a good thing because what Adobe has done for us is they have given us very extensive coding that tell you exactly what's happening with the style, what that selector is doing, who it is driving and what changing it might effect. So there is a lot we can learn from these comments. So I am just going to scroll down and you can see despite the comments, there is actually not a lot of styles in here.
There is not a whole lot of them. So modifying and changing your Accordion panel really isn't going to require a lot of work on our part. So what I am going to do is just go ahead and select all of these styles and copy them. Then I will close the SpryAccordion.css and I am going to paste these into an existing style sheet that's driving our page. So I am going to open up the shows.css and we can see that there are two style sheets affecting our page, main.css and shows_secondary.css, so since these are styles that are driving some of the show page content, we will place these on the shows_secondary.css file. So let's double click that to open that up and if you scroll down, you will find an area down at the very bottom of our Styles where I have left a comment that says Paste Accordion Styles Here.
So I am going to click inside that, we will just paste our Accordion Styles in and save this file. Now let's go back to our current.htm and we need to scroll up because in the head of our document, and you will find this on line 17 there is the link tag to our external SpryAccordion.css. You want to go ahead and highlight that and just Delete it. Now we could have also removed that using the CSS Styles panel but since we are in Code View that was fairly easy to do. So, let's save the file and if test it in our browser we shouldn't notice any difference in functionality or look and feel. So I will scroll down a little bit and notice that I can still click on each of the tabs and I am still getting the various states. So it looks exactly the way it did before. That's fine because what we have really done here is just organized our styles. We have moved them into a central location, now they are going to be easier for us to maintain and edit and that's what we are going to do in our next movie.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 59363 Viewers
61 Video lessons · 92280 Viewers
82 Video lessons · 104077 Viewers
56 Video lessons · 106825 Viewers
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.
Your file was successfully uploaded.