 Hello and welcome to this supercharged TLDW. Last time Serma and I made an accordion, not the musical kind. That would be weird. Now instead what we made was a UI element. Let's take a look at what we made. So you can see on screen here we have a bunch of panels, 1, 2, 3 and you can see that they're sliding up and down. Now you can also use your keyboard as well, a tab and arrow keys and so forth as well. Let's also look at the performance side. I've got the timeline here in DevTools open. If I click around these panels you'll see that each one of those clicks there's an animation and if we zoom in it's a comfortable 60 frames a second. Lovely and green, no red markers there working really well. So how do we make it? Well as we get into that of course there's only one place to go for this discussion. Yes, Theory Corner. Hello my friends, welcome to Theory Corner. Now here's our setup this time. We have a bunch of panels and by default what we're going to do is we're going to leave those well alone, sounds odd but if JavaScript doesn't run we don't want to lose this content so we're going to style based on the fact that JavaScript is running. So if JavaScript isn't running for some reason these panels will just stack up, okay? If JavaScript is running we're going to set a flag on the element which is going to cause the panels to rejig into this format where we have them kind of stacked up like this and the other things that we need to do is as you click on a panel header we're going to slide that panel into place. For this to also work we want to make sure that all content that's kind of outside this box is hidden so we use overflow hidden and we want to make sure that the content itself only takes up this amount of room and anything that's longer than that would need a scroll bar. Fair enough, okay let's go and have a look at the code. Welcome back, let's look at the code. Have you ever noticed how you never have heavy metal under an accordion? Never works out. So let's look at the code itself. Now the code is quite interesting overall and if you've got time definitely watch that live stream it's about an hour long but there's bugs and there's loads of stuff and loads of discussions. Some brilliant questions from the people who are watching the live stream so it's really worth catching that if you can. But there are main things that we can dive into and actually have a proper look at and the main thing that I think we'll start with is the attached callback. We're using custom elements here for the accordion and the page. You can see that actually in the HTML. Let's have a look there quickly. There's the accordion and then each of those panes is in there with the header button and the content itself. So let's look at the accordion again. So when it gets attached what we do is we ask for all the panes and then we calculate the geometries. The geometries is basically how tall is the header. Okay and then we figure out the available height based on the total height of the accordion minus the number of headers we've got and that's the amount of content space that we've got. When we move the panels around and we set up everything what we want to do is we want to make sure that we set the the pane content height to be that available height. So you see over there the flower that's the available height. That's where that bit is. So we want to make sure that all our panes have that available height. Perfect. When we see a pane that has the area expanded attribute then we jump down because that's the expanded pane so we need to make sure that all the other content stacks up below it. Fair enough. All good. So we've done that in the calculate geometries move panels then we set up some eventlessness for handling clicks and handling other things and then we basically set this attribute which is active and that means that the accordion is now ready for business and we can get going. But maybe you're wondering how in fact do you do the bit where you click on a header or you select it with a keyboard and you hit enter. What happens then? Glad you asked here to answer your questions. Indeed. So we have to jump over to the SC pane JavaScript for that. And all we have in here really apart from a couple of getters is this attached callback and when you click on the header inside one of the panes we dispatch a custom event. Now if you've never come across custom events before they're brilliant. What they do is they act like a normal event except that you get to name it and you get to set things like whether it bubbles or it's cancelable all that kind of stuff. Here we're using one called panel change and we're going to say that it's bubbling up through the DOM which is great because we want to delegate the handling of the panel change up to the accordion element itself which you will notice in the event listeners. Event listeners here there's this panel change same name great and then there's this on panel change which involves basically stepping through all the available panes telling them all to collapse and then finding the one that you actually selected and telling that one to expand. Last but not least we then call move panels again and move panels is going to basically tell all the the panels you know where they should be and basically by the power of transitions on transforms what will happen is as you tell the pain to be translate why 200 pixels it's going to go down the screen which ultimately gives you the effect that we saw before. So we're basically sliding panels around the screen performs really well. So there you have it a prototype of an accordion that is performance and has a really good foundation for something like accessibility. Now don't forget that you can subscribe to the channel and you can watch the live stream it's about an hour long but there's loads in there great discussions bugs bug fixes whole heap of things and I will catch you of course next time. Now I know it looks a bit strange. Click it and subscribe. Also live stream over there that's worth watching. Bugs and everything.