Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The markup though for an Accordion panel is quite a bit more involved and a little bit more complicated than the tabs. So I'm going to go ahead and walk through this with you. There's four of these to complete here on our webpage. Four little groups of Accordion panels to set up. What I'm going to do is I'm going to walk you through the first one, and then I'm going to go ahead and do the other three offline. Because they are kind of long and involved. So, I'm now looking at my starting webpage. So, this is in your exercise files folder. Go to folder number five, video number three.
Copy over the HTML file that's there into your Bootstrap folder. And then open it up in your browser. And what you'll see here is the same old services page we've seen many times before. And instead of the tabs down at the bottom now, I am going to try to make an Accordion panel presenting these four bits of information at the bottom of the page. So the words vaccination, check ups, senior pets, and diet plans will wind up being the clickable text that I can click on. And then the little chunk of text underneath with the read more will appear when I click on those various titles.
And, I have, of course I've changed the markup here a little bit to make to make it look this way, over the individual thumbnails that you saw or over the tabs. Alright. So, now I'm going to take a look at this same document inside of sublime text. And if you scroll on down the page here to where all of this starts, you're going to go down to line number 69. And right here, you'll see that I just have a little line of text here. It's just the glyphicon plus the word vaccinations. There's actually no markup anywhere else around that line, we will be adding some of course.
And then you'll see the additional text underneath the two paragraphs. Just the paragraph of information and the paragraph with the button for reading more. And I've got four of these set up here. The one I'm going to set up with you is the vaccinations item up here on the top. Then I'm going to set up the other three offline. And I will give you the completed file inside of your exercise files folder. So, if you get lost anywhere along the way, you can take a look at my work and compare it with yours. If you're going to start this, the very first thing you have to do is specify this entire area, is going to have to do with the Accordion panels.
We are going to do that with a div. So, just above the very first line here where we can start the line 69, on line 68, I'm going to add a div with the class of panel-group and then you need to give this an ID. And the ID can be anything you like. I'm not terribly creative this way. So I'm just going to call it Accordion. If you had several Accordions on your page, each of them would have to have a unique ID. And then I'm going to scroll down here to the bottom on line 87, and I'm going to put in a /div.
And because we're going to add a lot of div's to this markup, I'm also going to put in a comment that says end accordion. Then, around the very first item up here at the top. The div up at the very top here, lines 69 through 71. I'm going to add another div. And this is going to be a div with a class of panel and panel-default. And I'm going to close that div here, just after the last paragraph around line 73, /div.
So, this particular div with the classes of panel and panel-default is going to specify everything that's inside of this as part of one Accordion panel. It's just one unit that we're working with there. Alright. So the next thing I want to do, is I want to designate where the heading of this particular panel is going to be. In other words, what is the title, what's clickable, and all the rest of that. Basically, everything that's going to go around this span and the word vaccinations here. So let's go ahead and add that. And in fact I'm just going to put in a couple of returns so that you see that one line there, it sort of stands out a little bit better.
So, here on line 70, I'm going to add a div with a class of panel-heading. So this indicates that this, the start of the Accordion panel, inside of that, I'm going to put in an H4. And it could be any heading tag you want, but we've been using H4s here all along, so I'm going to continue using that with a class of panel-title. So these H4 and the div that I just put in need to be closed. So I'm going to go ahead and close those before I forget.
So a /h4 after the word vaccinations here on line 73, and a /div that will go in line 74, and that closes the div that starts on line 70. If you make sure you do your indents right, hopefully, those will all line up. And you can see which divs are open and which are closed. Alright, then, inside we're going to add an A tag here that's going to go all the way around. So let's go ahead a, href equals a #. That's the start just before the span and it's going to end after vaccinations.
And then inside of that A tag, we're going to add several attributes. So, let's start with the href. As we saw with the tabs, what we're going to do is, we need to specify when this word vaccinations is clicked. Where is it going to go in the page? And the href here is actually going to refer to an ID elsewhere on the page, so we're going to use the same names that we used under tab. So this is VACC. And I'll put in that ID of VACC later when I go down around line 76 and I work with that bit of content down there.
They call it collapse instead of calling it accordion. And we’re also going to add a data-parent of #accordion. So we're saying that this particular link is part of the structure that goes with the ID up here on line 68. The ID of accordion. So, we're associating all these units together with this data parent attribute. So, that's a lot of markup that went around that span class that we started with in the word vaccinations. So, that's everything that's going up there in the panel heading.
Now we're going to set up the panel body. Well, what we're going to do is just after the /div tag here on line 75, I'm going to add a div with the ID of VACC. And of course that corresponds with the href from line 72, where we're calling that ID. Alright, so back to line 75. We're going to give this a class of panel-collapse and collapse. And I'm also going to add one other thing which is a class of in, in.
And by adding this class of in, this indicates that this is the panel we want open when the page loads. So, all of your other Accordion panels are not going to have this class on in, but they will of course have the classes of panel collapse and collapse. So that's the start of this div and it's going to close just after line 77 here. So /div. And let me indent this paragraph here. There, that makes it a little easier to read. Since we had a panel heading, we're also going to have a panel body.
So after line 75, we're going to add another div here with a class of panel-body. And that div is going to close on line 79. So that is the basic mark up here for one of the Accordion panels. Now what we need to do is we need to take this mark up and we need to duplicate it for the other three groups of text that we have here, in the same kind of way. You see what I mean by being a lot of mark up? So, now what I'm going to do is I'm going to go offline here, just for a moment.
I'm going to copy all of this code and I'm going to paste it in around each of these little chunks of text here. And I'm going to come back and show you what I did in just a minute. Alright, so how'd you do? Hopefully, you managed to copy this mark up on over and you've managed to mark up everything correctly. Just to show you what I have done here, here I am with my completed file. And I'm just going to show you the check-ups portion of this. I copied over all the mark-up that I had before and I changed just a couple of things. Remember the ahref that you see here in line 86, needs to point to it's own unique ID.
So, since with, this one has to do with check-ups, I called this #checkups. That corresponds to the ID that's here in line 89, where I call the ID of check-ups. And the other thing that I did was, also in line 89 inside of this div with a class of panel-collapse and collapse. I removed the item called in, the class called in, that's gone. So that class called in you'll see up here in line 75 that's associated with the vaccinations, but it's not here in line 89. And that's because remember, in is going to correspond to the panel that is open when you initially open the page.
If they're not quite working correctly, the first thing then I would double check is to make sure that you have your IDs set up correctly. Make sure that you are calling the right ID in the link, and that, that's corresponding to the right ID inside of the text that you want to have appear. It's very easy as you're copying and pasting markup to forget to change those IDs, so that's probably the first place you're going to make a mistake. And then also I'd double check to make sure all of your divs are nested correctly. That's another thing that's very easy to mistake, because there's so many divs that are involved in putting together an Accordion panel.
Markup is very complicated, so make sure that all of your divs are closed correctly. And again, if you need to, I have given you my markup inside of your exercise files folder, so that you can take a look at that and compare if you have any other errors that you need to take a look at.
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.
Your file was successfully uploaded.