Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this exercise we will continue to style our Accordion widget. If you remember in the last exercise we went ahead and style the tabs. As we tested it, when we clicked it on the tabs, they reverted back to another color and that's because we haven't quite finished yet. So let's keep going down finish outer styling and we will see the final results after this exercise. Scroll down and I am going to find the AccordionpanelContent selector. So, it's just a little bit below that. Now there is an interesting note right up here that says "Anyone who styles and Accordion *MUST* specify a height on the Accordion panel Content container." So there is default height of it right now of 400 pixels and that's much too tall if you have noticed as we are testing that this thing really gets high. So we are going to change that. So the first thing we are going to do is we are going to change our height value from 400 pixels to 250 pixels. Now it's still not quite going to give us the result we're looking for, but it will have us on our way.
The other thing that we are going to do is we are going to modify overflow from auto and we are going to change that value to hidden. Now the reason we are going to do that is because we are going to make our panels exactly the size they need to be. So because we are going to do that we don't want there to be any case where scroll bars show up because our Accordion panel is going to be really tight. So the auto overflow will cause the scroll bars to show up in your content if it's a little bit smaller than your panel. So by turning on hidden that may clip off some content originally, but later on when we change the height of our panels to be a variable height rather than a fixed height, that property is really going to be handy.
Now the next thing we will do is we will go ahead and give a background color to Accordion panel as well. So I am going to add an attribute here after height; I am just going to type in background and we will type in a color and we will just use #CCC and that's kind of a neutral gray. Since we are using our images in there, we don't want to throw a bunch of color in there; we want them to be the color, so we will just give it a nice neutral gray. So we are going to add a couple of more rules and we are going to be adding rules to the AccordionpanelContent region. So we will just stay right here where we are. I will just go ahead and start anew rule and this is going to be .AccordionpanelContent p. So it's targeting any paragraphs inside our Accordion panel. The first thing we are going to do with that is we are going to set some padding. So I am going to set padding and we will use some shorthand notation here. Type in zero, so we are passing a zero for top and bottom, and then for right and left we are going to pass in 20 pixels.
It won't matter as much on the right hand side but for the Artist note that will hold it off of the left edge and the right edge and equal amount of distance. Let's go down to the next line and we are going to pass in a margin for our paragraphs and we will type in a top value of 0.5 ems and we are going to pass in a value for our right and left of 0. So we don't want any right or left margin, but we do want a top and bottom margin. The next rule we are going to pass in to this one would be color and we are going pass in a color of #777. That's sort of a darker gray, and then we will close our curly braces. We keep scrolling down and what we are going to do now is we are going to go ahead and write a selector for our media style on our AccordionpanelContent. So we are going to type in .AccordionpanelContent p.media. So if you remember earlier we have applied the media style to the descriptive line underneath our image.
So we are going to go ahead and give that a font-weight of bold. So font-weight and then choose bold and then we are going to pass a color value into it and the color is going to be #561216, sort of that darker burgundy color. That's the end of that rules, so we will go ahead and close that off. One more item inside the AccordionpanelContent. We have got an image tag in there too, so we are going to control how the image floats around in the middle of that. So type in . AccordionpanelContent img. That's a really long selector.
Go down to our next line, and I am going to type in display and I'll change that display property to block. I will go down to the next line and give some padding and we are going to give a 10 pixels worth of padding top to bottom and 10 pixels worth of padding right to left and then close that selector. So, the reason we did display block is so that the image would always sort of flow in its own area and any inline level elements wouldn't break up against it. The likelihood of that happening is pretty small but that's going to prevent that from happening. Now we have got three additional rules that we need to modify. So let's scroll down and find those rules. So we have AccordionpanelOpen .AccordionpanelTab.
Let's talk about what this means. So if your Accordion panel is open your Accordion panel background tab should be this color. Now if you remember we have styled our AccordionpanelTabs a moment ago, and we have controlled the h4 when the panel is open, but we still haven't controlled the tab when the panel is open. We are going to pass in another background color value rather than the gray that they are currently using. So let's replace that value with #d6e6bf. That's that light green color that we have been using and that's the color for the hover of our table, so it sort of ties all that in together.
Now let's go down to the next line and we are going to give this a border as well. So we are going say border, and instead of saying border-bottom we are going to say border-top. So we are going to apply a top border to this and the border is going to be 2 pixels, solid, and the color of the border is going to be #521626, and that's the end of that rule. So what that's going to do is that's going to give us a nice thick border on the top of this, on the top of the tab, when the panel is open and that will give it a little bit of dimension.
I am going to keep scrolling down and I want to find the next set rules AccordionpanelTabHover. So when the tab is being hovered over we kind of control that with a specific color as well. So we are going to do that. Color is the same, it's saying foreground color. So this is going to change the color of any text or any items that might be inside of our tab as it's hovered over. So we are going to change the color to #028925. So #028925 and that's going to give a hover effect to our text as people hover over.
The next selector down here is the AccordionpanelOpen .AccordionPanbelTabHover. So once again this is going to allow us to choose a different hover cover when our tab is open versus when our tab is closed. We will go ahead and change that one to #028925. So we just go ahead and give it the same. Sometimes it can get a little busy if you have different hover effects versus open versus closed. Now the last thing that we need to do to our styles, we are going to scroll down and we have two selectors down here in the bottom that are right now gumming up the works. We have . AccordionFocused .AccordionpanelOpen .AccordionpanelTab. Now the long in short of what these selectors are doing is when our panel achieves focus, meaning somebody has clicked on it, it's changing it. Now that's great if you want it to highlight when somebody is looking at above, but really what it's doing is it's overriding the selectors we have already written as soon as somebody clicks on it, and that's not what we are looking for.
So what we are going to do is we are just going to highlight those and we are going to delete them. So it's not going to change functionality at all; it's just going to change appearance. So let's go ahead and save that. We will go back to the current.htm and we will test that in our browser. So now when this loads up, notice that the image has a nice green highlight to it and there is that thick border on top of it. When we click on Painting Information and news from the Artist, it gets the same thing. Notice all the padding that's going on inside that to make the text looks a little bit better.
Something is gone on there and I will go on image and some of our image content is currently being clipped off and that has everything to do with the fact that overflow is set to hidden. So there are still a couple of things that we need to modify here. So I am going to go ahead and close Firefox and I will come back into Accordionpanel. Now what I am really interested in looking at here is the second tab. I will go ahead and open that up by clicking the tab and when I click inside the description I can see that there is no format here, so that's why we didn't see any padding. So be sure that any information you have in there is formatted with the tag that you are expecting. So we will go and format that with a Paragraph, save the file, and you can just see even here in the preview that it's changed for us.
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.