FREELessons: 8Length: 39 minutes

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.3 Accordions

In this lesson, you will improve on Bootstrap’s basic accordion components using some Propeller-specific markup.

2.3 Accordions

Hello and welcome back. In this lesson, we're gonna take a look at the accordion component in Bootstrap and talk about how we can expand on that, and alter or customize the styles of the accordion, using Propeller. So we're now in the Lesson_02_03 folder and we'll be starting, as always, with the site_start folder. So I'm gonna make a copy of that, and I'm gonna create a new folder called site_end and that's where all of our changes are gonna be saved at the end of this lesson. And let's open that up in brackets, so right click, Open as Brackets project and there we go. And I'm gonna scroll down until I find the section that starts with an h3. I think this is it here, I think I went to far, yeah. An h3 with the word accordions in it. And there's really no component in Bootstrap called an accordion. It’s really just a panel group that has collapsible panels in it. And we can take a look at its default behavior, if we jump over to Chrome. And here again, looking at the Lesson_2_1 folder where we have our Bootstrap accordions, and we see that it looks decent enough. We can click on each of these titles here to expand those out, and we can see that as we click one, the one that was open before collapses. So it's a really nice component that we have there. Now, with the default Propeller styles applied to it, it still looks pretty nice but we can take it to another step. So here's what it looks like with a default Propeller styles. But we're going to apply some Propeller specific classes to it again, in order to make it look even nicer. So let's jump back into our code. There's one class we can apply to the entire panel group that will really clean up the styles here, and that class is called pmd-accordion. But you're gonna add that class to the same element that contains your entire panel group. Let's save that and see what that looks like now. So we're gonna refresh our page and first, we actually need to navigate to the right folder. We need to go to the site_end folder and then navigate down, and there we go. So we see that our our panels here are accordion, is a lot cleaner than it was before. We no longer have the border around the edge, the corners are nice and sharp and it's just a much cleaner look, I really like the way that looks. And as you can see with the panel titles, we did apply some classes that gave them these colors and those are available in Bootstrap and in Propellor. But if we go back to our index.html file, here's our first class, which has first panel, I should say, it has a class of panel default. If we just change those all, I'm gonna change this panel success to default, panel info to panel default, panel warning to panel default and panel danger. So I'm just changing all of those to default, so that we can see what it looks like when they're all the same color. So I'll just refresh that, and here we go. We have this nice clean looking setup with our collapsible panels. Now, we do have other Propeller classes we can apply to our panels in order to customize them a little bit more. There's one called pmd-accordion Inbox. Now, this one's a little bit tricky to get it to work right, and let me show you why. I'm gonna jump into our code and I'm going to apply that class. Let's go back up to the beginning of our panel group, here, and after pmd-accordion, I'm gonna add the class I just mentioned, which is called pmd-accordion-inbox. Now, what this is supposed to do, and we'll kind of see a glimpse of it first. We'll go back to Chrome and refresh the page. What it's supposed to do is whichever group or whichever panel is active and open, it's a little bit larger than the panels below it. And then when you open another one, that one is supposed to grow, but we see that's not happening. And the reason why that's not happening is not obvious. As far as I could tell, it wasn't mentioned on the Propeller website and it took a little digging to figure it out. But what it means, and basically, what I had to do was to compare the code on the Propeller website line by line to the code that's on the Bootstrap website. And there is a data attribute that's added on the Propeller website that isn't there when you look at the code for panel groups on the Bootstrap website. And so, what we're going to do is, we're gonna drill down into the panels, the individual panels to the panel headings, panel titles, and to this anchor tag that's inside those panel titles. And we just need to add one data attribute to this anchor tag. So we have data-toggle, data-parent, we have aria-expanded, and aria-controls. And then we need to add one more data attribute here called the data expandable, if we can spell that right, expandable. And we're gonna set that equal to false. So I'm gonna highlight that attribute, copy it, and I'm going to navigate into each of these panel headings to that anchor tag that's inside the panel title. And I'm going to paste that. I'm gonna add that data expandable attribute and set it equal to false. And so, again, this is not an obvious solution, this is something I had to dig for and figure out myself. But if you just go to the Propeller website and copy their sample code, it will be there for you. If you're taking an old Bootstrap website and upgrading it to a Propeller theme by adding material designs to it, then you'll have to do a little digging to figure this out, and that's what I had to do. So we have this data expandable equals false there. We're gonna go down to this anchor tag, we'll apply it there, and that should take care of it. So let's save our file. We're gonna jump back into Chrome and refresh. And now, when we click on each individual item, it's expanding out and growing, so that it's a little bit larger than the other ones. So that's the inbox panel group. I wanna take a look at another option that we have and what I'm gonna do here is go back to the start. I'm gonna put a little more space here, so it doesn't take me so long to find it, next time. So what I'm gonna do is I'm going to collapse this panel group and I'm gonna copy it. I guess it has to be expanded to copy it, okay. So we're going to copy this entire panel group here, and I'm going to paste below, so that you can see examples of both of them on the site at the same time. So we'll paste that second one and we scroll up to the very beginning of it. So here's the beginning of second panel group here, and I'm gonna take off the pmd-accordion inbox and I'm gonna change it to pmd-accordion-nospace. And you'll notice there's no hyphen in between no and space. It’s just one word, no space. So let's copy that and let's jump back into Chrome. And when we refresh, we see the second panel group below our inbox panel group. And the second group, you'll see, has no space in between them. So it's just another option for creating those panel groups. And you'll see, since we give it the same ID, it's not working. That's something you need to keep in mind if you're creating multiple panel groups on a single page, that you need to give them different IDs. So we'll give this one an ID of accordion2. And then all of these data parents that are pointing to accordion, we need to make sure those are pointing to accordion2. And you also have to change these collapses as well. So that's gonna take a lot of changing, so I'm gonna pause the video while I update those. Okay, so I've gone through each of our panels, made sure that the data-parent attribute is pointing to accordion2 in this second accordion and that the ID itself is accordion2. I've also made sure that the ID for each of the headings has a number 2 at the end of it and that the labeled by that's pointing to that ID also has a 2 at the end of it. Also, this div here as an ID of collapseOne, I've added a number 2 at the end of it. And you'll notice it's referencing it here and here, so I've added a number 2 at the end of those. So there's a bunch of number 2s that I've added and if we added a third accordion, we'd add a bunch of 3s as well. But this should get us closer to where we're going. So let's save that and let's jump into Chrome and refresh, and there we go. Now, everything seems to be working as expected. So those are just a few different options that you have when dealing with accordions using Propeller. Thank you for watching and I'll see you in the next lesson.

Back to the top