 accordions are a pretty common type of component that we find on lots of websites these days but they're often a little bit lacking either with sort of clunky animations or no animations at all and the design of them is often kind of uninspired and boring and sometimes they can just be downright ugly. Well my friend and friends I recently came across this code pen by Zdash that just looked awesome and I thought it would be the perfect starting off point for creating an accordion that's responsive and well good looking to add a little bit of delight to our user experience on our projects that we're working on. So here is you know Zd's what he created and I think it looks really nice as I said but as we can see with one of the side things you know it's an experiment or something he did to play around with a bit so it's responsive in the sense that it works at different screen sizes but we're hiding content which we don't want to do so we're going to look at how we can make this actually be responsive and be you know different orientations and everything but for however we're doing it or the different orientations and everything we're going to do we're going to rely on this of using the flex grow when something's active and we're telling you know the panel it's allowed to grow and you can see it fills up the space and that's really a nice trick and sort of the crux of what we're going to be building upon here to make it work. Now we can finally get into our HTML and CSS and all of that fun stuff so you'll see here I'm just in a regular HTML file you can definitely build this with your framework of choice whether it's something like react or spelt or view or angular or whatever and make this into a bit more of a component with panels and stuff but we're going to do it the classic way here just so anybody can sort of use it how they want to but we just have our basic template set up here and I have a link to my CSS file and the script tag here as well because we will be having to use a little bit of JavaScript for this one as well and if we go and look on the side here the only other thing I really have that's important is I have some images that I'll be using for the anchor the boat the fishing and all of that and I also have an svg for all of my icons we'll talk a little bit more about the icons when we get around to it but I have used a site to create a single sprite svg instead of having separate ones either way it wouldn't really make a big difference in the long term but we'll see sort of why this sprite is good and how I created it in a little bit but yeah that's sort of what we're starting with the images obviously I just found on my own and when we come to start writing the HTML here it's very easy just to dive in and make a total mess of things so especially for interactive components like we're going to be building here where people might be interacting with it in different ways and that's because some people are going to be using their mouse some people will be using touch devices other people will be using keyboard navigations and other people will be using assistive technologies to visit our pages so how do we make sure when something is interactive that they're actually getting the right user experience and they're able to interact with it and get all the information they need and it works well you open up google like any good developer would do and in here we can just do a 11 y which is short for accessibility and I'm also going to add in here accordion because that's what we're going to be building right there we can grab one and I'm going to be going to this one here though I'm sure all of these other ones have decent patterns that are set up but the w3.org it is the area authoring practices guide which goes through on the proper way to set things up which makes it work especially for keyboard navigation as well as through screen readers and assistive technologies so I'm not going to deep dive all of this I'm just going to say that this was sort of my base for how I built things out and why it's important is we talk here about the keyboard interactions that need to be happening so we need to be able to tab on and shift tab to go backwards and use either a space bar or enter to open and close our tabs so that is an important part of it and it does go more information here as far as heading levels that are required in them things like area expanded having a region we're going to talk more about these here but the nice thing with this is it gives us a good starting point to build from and the reason we want to do that is because when we're writing our html if we don't follow that from the beginning we build in a lot of technical debt into what we're creating because we might have to do a lot of changes to make it accessible later on whereas if you do it right from the beginning just you do it right from the beginning maybe you spend an extra 15 minutes just figuring it out and getting it working but that's a lot better than spending three six eight plus hours after the fact trying to refactor something completely because it wasn't done properly in the first place so try not to build any technical debt and just do things right from the beginning now nothing to do with accessibility but we're going to start things off and i'm just going to put a wrapper here which is going to hold everything in the middle of my page for me this would not be something related to the accordion i just don't want to just stretch the entire width of my page and we can come in with the accordion itself so i'm just going to do an accordion class like that which is the entire element i'm not using a section or an article or anything like that i think just a div for something like this is fine of course we could have a main and wrap everything in a main but you know we're just sort of focused on a single component right now so we're just going to focus primarily on what we have here and inside the accordion we need to have our accordion panels and each accordion panel sort of has two parts to it we have the part that we can see from the beginning and then the part that expands out from that if you're wondering if you can use details because you know we have the details element which is sort of like this native drop-downy type element inside of html and css or html i should say the first thing with is you can't really animate it but it's also not really great for an accordion i can add a link down below details is very specific basically on what you should use it for and it doesn't do very good for most other things but here we have our accordion as i said we'll have a accordion panel now we are going to have many panels but we'll just build one out and then we can just replicate that because if you were using you know building this as an actual component within a javascript framework or something we just have to build one anyway um so we'll have our accordion panel like that and then as i mentioned inside there we're going to have a couple of things we're going to have a heading as well as our content itself so for now let's just do an h2 plus a div so there's my heading at the top and there's the div that will be underneath it and you might be wondering well what about you know we have to be able to click there's some interaction going on shouldn't we have a button interestingly and this is following the area authoring guides that we were just looking at and this is why i like following those so i build things out properly from the beginning is the button should actually go inside the h2 here which is allowed so my first one here the the text inside of there is going to be boating so i'm going to throw that in there and then here inside this div i think we should give this a class so we can style it up a little bit so i'm going to do class is equal to accordion content and we are going to be using javascript for this so i'm going to do an id on here my id's aren't going to be exactly the same so i'm just going to do panel one content here just we can you know we're going to panel one panel two panel three so i'm just numbering it like that and putting content at the end here and the reason i'm putting content is because we're going to have a span wrapping around this so here i'm going to put my span and we can bring boating inside of that and on the span itself we can have the id and it's going to be panel one title and you might be wondering why i'm putting this in a span we're already inside the h2 and that's just because i want to sort of treat this as its own thing because there's going to be something else in here which is the icon so we're going to come back to the icons as i said later but we can just drop the svg in here and i don't know why but the emit doesn't like doing svg inside of vs code so i'm going to put the svg here now we'll give that a class as well and i'm going to do that one as a core accordion icon and i have noticed some people when i'm not using bem say something so of course you could 100 use bem for this there's no reason not to be using it just i'm just naming it like this because that's how i did it for this one and i still do use bem or or my own variation of it but you know we for something like this we don't really need i'm because it's not part of a bigger project i'm just going with sort of general class names here now this icon's not really going to be useful when it comes to assistive technologies um you know a screen reader doesn't really need to see it or know it's there and i don't want to worry about it trying to do something with it so i'm also going to add an area hidden is equal to true here just because it's really for sighted users um so we can hide it from things like screen readers just with that right there and so we have our voting um as our actual title on that now let's cycle back up to this button because this button is a very specific thing and it's actually going to be doing a lot of different stuff we're going to need a few different attributes on here so the first one i'm going to do is give this a class and i'm going to call it accordion trigger because it's triggering my panels uh the next thing i'm going to do here and let's just tab these over so it still looks nested and we're going to have an area controls because whenever you have a button when you click that button it's doing something we should have an area controls to say what it's controlling and in this case we already have an id down here of our panel content one so i can throw that on there so our button is our accordion trigger that's controlling our panel content one and it's going to be able to make that expand and contract shrink i guess um and the last thing we're going to do on here is an area expanded and expanded and the reason you do an area expanded is to say whether or not that panel is actually open is panel content one expanded or visible or is it not visible and so we're going to say that this is true because when we start this off i'm always going to have one panel open with how i'm creating this just because it's going to help with things like page you know i don't want content to jump when we're opening it and stuff so we're going to set this up so there's always only one panel open and at the beginning the first one will be the one that's open and the nice thing with this is we're going to sort of lean into that semantic css thing that i've talked about previously where we're actually going to be using this to do some of our styling but we'll talk about that a little bit later on when we get to the actual interaction side of things now for this part right here we have a lot going on we're going to have one more thing which is actually going to be an id on the h2 here and here we did panel one content so as you might guess up here i'm going to do a panel one heading and just really quickly i put an h2 here even though i don't have an h1 anywhere on my page ideally you would have an h1 the heading level of this should be something that makes sense within your page so i did h2 just because h1 wouldn't make sense we're going to multiple of them but also i'm assuming there would be a title somewhere else this would be something later on it couldn't maybe be an h3 and h4 i also get comments about well it's really hard to know what it's going to be in a specific spot if you're using something that's like a reusable component that you could be plugging into different areas you could build in the functionality to have that be changed right so it would fit with whatever you need you don't have to hard code the heading level in there it could definitely be like a prop or something that gets updated depending on the this you know what the information you're giving it so i'm going with an h2 just make sure it fits with your document structure if you're not sure about that card coming up right now or a link in the description mode how we can or how we should properly use heading levels to create the document structure and with that out of the way the reason that i put this id of h2 up here is because on the div that we're putting down here which is going to have the content itself i'm going to come here and uh yeah we can put it let's put this on multiple lines too because we are going to have a few different things on here and i'm going to come down here we're going to do an area labeled by and it's going to be labeled by the heading that is right here just like that and so we're just associating this heading to the content that is going to be inside of here and the other thing that's important with this and this is something you very rarely do i've done a lot of adding of area attributes in my content and area mostly comes in when you're building interactive things you shouldn't be having to use area or roles if you're just writing regular html and css but when we add interaction this is often where they come in which is why you're not going to remember all this you'll never remember at all but this is where having something like that site i was showing before the authoring guides are really useful and what we want to do is have a role of region on here and this means that when somebody tabs and then they open with the keyboard we open it up if we're using something like narrator or another assistive technology you can actually push a button i know on windows narrator once it's opened if i push d it goes to the next region so i'd go from the title to the content that's after it and i can start reading the related content without that there's no easy way to actually jump to that so this is really important and the role region here will not work if we don't have this so it's really important that we have the area labeled by so we actually have a title for that area and then we have the role region here just to make the content in there easy to get to now i just have this random paragraph of uh filler if some stuff right there so i'm just going to throw that in here so just some paragraph that's going inside of there and while we could do this as a background image i'm also going to grab my image and throw that in here as well and actually have that as as content that's inside of here and the reason i'm putting my image here uh and i'm just doing it as a regular image but we could even use a picture tag or something but the main reason i like doing this is we can actually add alt text to my image and it's easy enough to make it as you know pretty much appear like it's a background image if you'd prefer to just use a background image you can definitely do that but having images as content is always useful and while we're here we're going to do one more thing actually up here with this div on the accordion content before we get the other panels in place and the reason for that is we have a setup we're going to keep something very similar to this that's going on and what i want to do though is you know we're going to have a bit longer for like these paragraph texts in mind just so if we needed more text it would work but when we're not there like when we're not looking at something that text isn't actually visible and so what i'm going to do is ideally when this is closed this entire area uh i'm going to bring it here because it's another area i'm going to do an area hidden is equal to true and if you look at the a11y thing from the w3 org that i was looking at earlier they actually suggest using a hidden equal just a hidden attribute on here which prevents this whole thing from rendering normally i'd go with that no problem but the problem is we're using this image and because i'm using that image and i want the image to be visible for sighted users um we're going to keep that there it it's sort of a little visual because it's a little teaser hint that the title is giving to the non this boating it gives us the information this is just a little bit more so i'm just going to use an area hidden of true so this only comes in after because again the image wouldn't load in we could also maybe use the hidden on the paragraph instead but i think this is sort of a nice compromise so yeah we put that there but in this case actually i'm just saying that this area hidden will be false and then all the other panels that we'll have after that will have the area hidden is true so when our panel is open the screen reader would have access to the image as well as the text that's going to be in there but when it's closed it just has the title and then they can get that rest of the information afterwards if they open the panel and with that done we have our panel and that's going to be the same thing for each one i'll go through the update in a second once i add all the panels in just because there would be a few little things but first let's get our svg set up uh areas we haven't looked at anything yet but there's nothing much to look at at the moment but um if you look here i i'd got some icons that i wanted to use for this project so the icons were all there uh and then i saved them each as an individual svg file and what to be able to like use these i could just use each one as is but first you'll notice like these are all colored i didn't want all of that i wanted sort of to be able to individually style them nice and easily uh but the main thing that i wanted to do is have some sprites so there's this site which is svg sprites uh which sp you know the es at the end there but basically whoops we don't want to save that uh we can just take your any if you have a group of svgs you just grab them drop them in here and it will create sprites for you and you can see down here you can copy sprite download the demo download the sprite um and stuff so i can just copy what it created here and bring that over into vs code which is exactly what i did i did clean things up a little bit based on what it gave me so but basically it's just taking each one of the svgs here so i have my anchor here or the first one's my boat so you can see symbol and it has i have an id of boat and everything there now if we look at what it originally had given me um if i make this a bit bigger i had id two two on a group and then i had this anchor here and i had these blank depths and stuff so i did clean this up a little bit to remove those i did keep these uh on there but i also took them off and i just had it on the symbol to have the id so i changed things a little bit um or here you have the id of anchor on the symbol and then i had anchor here so i just cleaned things up um to get rid of anything i didn't need it took me two minutes to do it um and i'm left with this where we have the symbols which are things that we can reuse throughout a project you'll also see it comes with the class of uh with zero height zero and a class of hidden on here so i can just copy all of this um and i want to do this if you if you were using it just as is you could definitely use it as is but i'm going to come all the way down to the bottom after everything else and paste that in and everything's getting formatted because i am using prettier um so it just does a little bit of code formatting for me but uh if i come all the way back up it does leave this big mess of svg at the bottom of your project but it's not the end of the world um but it makes it really easy to use these wherever i need to use them now because we have the ids on them and the nice thing with doing it this way is they're inline which makes custom styling and other stuff really easy on them uh because right now there's no fills or anything that's on any of these so we'll see we'll see how we can do some styling magic with those in a few minutes so if we go back up to that svg that we'd originally put in there uh where was it here it is uh so we have the area hidden on there we had the true and inside that svg what i want to do is use something called use just like that now this is my boating one and i have the idea of boating so i can just use the xlink href of the boat like that so i'm just referencing the idea of boat and then because it's going to go find the symbol that has that boat idea on it and it's going to put that in there for me there is an important thing with this i am using xlink href which is technically deprecated but it just has better browser support um than the newer way of doing it which i think it might just be href i'm not sure uh but yeah we can just do it like that and it should work perfectly fine so saving that we can go and take a look at what our single panel looks like right now and it does not look like anything too magical uh but we have it there look at that uh the big button we have the word boating in there we have my symbol and we have the text that we wanted and we want to make that look a lot prettier uh so what i'm going to do is just add in all the other panels and i'll see you in just a minute all right so i brought in all the other panels so here's the first one which looks identical to what we'd had uh but you know the next one i updated the ids on here the area expanded now is false on the buttons that are not open uh with the area hidden of true on the div over there and then i just you know change my images changed the svg link and other than that everything is identical and right now if we look at it we get this really not very nice looking thing and now we can start writing some css to make that look better now you might have noticed it was already in like a dark mode with a dark background and light text so i did have a little bit of css uh to start with where we have the box sizing set to border box and i have this html color scheme dark which just forces the dark mode on the site um if you wanted to allow for both we could do a dark light um on mine it would stay dark but on other people's if their settings are set to light it would switch to light and then i just have a very basic reset here on my body just to set some font styling the first thing i want to do is just set up that wrapper that we created at the very beginning if you remembered and so on this we can just throw a max width on here i'm also going to add in the margin inline to auto which is basically margin left and right it's a logical property so if you had a vertical writing mode that would be top and bottom and we also want to add in here i'll add a little bit of padding and i also want this to be inline so i'll just do one ram and that just means it's smaller screen sizes that um we won't touch the side we'll see that in one second uh but the other thing we want to do here is image max width 100 percent and we probably don't need it for this but whenever i do this i tend to also say display block uh just so our images don't overflow my images were a bit big i didn't overly optimize for this project but the their sizes with the webp compression were incredibly small so uh i'm going to open my dev tools really fast here and just to show you the the one like if we're at very small screen sizes the idea here is that uh we get that spacing on the side with the one rem on on there um to make sure it doesn't overflow things look a bit funky here but we're at a really small size so i'm not too concerned just yet with the overflow that we're getting it's probably caused by these sbgs actually so we'll get around to fixing all of that uh now let's jump into it and get these panels styled up the very first thing we can do is let's select our accordion itself which is the parent of everything else so accordion uh right if we let's just come back here as a quick refresher because it takes a while to write all that html as we have the wrapper then we have the accordion and then inside the accordion we have the five individual panels so i'm going to do a display flex on here which would get them to go next to one another but i didn't mention i want to make this responsive so for now we're actually going to do a flex direction of column which makes everything rose which makes them stack and sort of go back to what we just had i also want to make sure we actually have space between these so i'm going to do a gap of one rem just because if not it would look a little bit ugly uh a little bit later on and so we nothing really looks too different yet now we have a few little things we need to fix up here so the first thing i'm going to do is we'll get our accordion panel and we're going to throw a position of position of relative on here relative and the main reason i'm doing that is right now our images are way too big and so let's fix those that's one of the things causing the big problem right now so i did give those a class accordion image and on that what we're going to do is a position of absolute and again if you did this as background images instead we wouldn't have to take this step but again i like having images actually in there so we can have the absolute on there which sort of starts fixing things let's also give them an inset of zero which is the same as top bottom left right of zero it's getting there the next thing i'm going to put on here is an object bit of cover which is just going to make sure that if the image is getting stretched or pulled or anything weird that it's not going to get too manipulated because right now you can see they're actually overlapping one another even though we have an inset of zero on here with images just because the way they behave and they're replaced elements with other things that would actually control the size of it but with an image you still need to put the width and height of 100% on there so with that they fit into the areas that they're supposed to be living if i took off that object bit cover you can see they look terrible so that's why we want that on there so each one's fitting but the problem is by using position absolute they go in front of their content so to be able to fix that we can use a negative zindex so zindex negative one and then they go behind the content that they're in this would work fine and not cause any problems most of the time but we if you had another background color that was set they get a say the wrapper had a background color it was inside another section that had a background color it could it would actually go behind that so on the accordion panels themselves i'm also going to put an isolation of isolate which creates a new stacking context and just make sure that this negative one can't escape behind the panel itself we could put that on the accordion here but i think we're going to have some suit elements of play that this will help with as well later on now the next big problem is these these icons that we have there right um just because they don't look too fantastic so that's our svg's here and i did give those the class of accordion icon so we can style those up and make them look a little bit nicer now these icons are going to be the beginning of how we can sort of customize this a little bit too because we're going to get kind of heavy on custom properties on the accordion itself that's going to give us some controls on like the overall aesthetic of things along the way but let's set up the very basics of it first so we can come here and do my accordion icon and so the first thing actually let's give this a background that's going to be pink just so we can see that's the svg itself which has the default sizes on it which is 300 by 150 maybe something like that i don't know why that is but that's what it is so let's come in with the width just to shrink it down a little bit and we know we want it to be like a circle we're going to sort of steal zed's aesthetic that he had going on because i found it looked nice so we can do an aspect ratio you can just do one or you do one over one to make it the width and the height the same so we just have to update you know if i update this it updates both of them aspect ratio of one we can add a bit of padding on here just because if not it's going to look a little weird and then we can add in our border radius and we just do a 50 to make it into a nice circle like that but we want to improve these colors a little bit so for the background it will be a consistent color and actually before we do that let's come to the button itself which was our accordion trigger just because i want to make one quick change here before we finish styling that up so on the trigger itself let's just give this a background of transparent so we don't actually see it right now and our border border zero so the border disappears that looks a little bit better and the reason i want to do that is here we can add in i'm going to use hsl zero zero percent zero percent which will just give us a black and then i can do a point two five like that just to give us you know a bit of a background color for the circle that we'll have and actually we're going to have some some darker colors on there so maybe a seven five would actually look a bit better it's hard to see the icons but we're going to change those colors but there we go we have those coming through there i might have forgot the last one down there we'll update that in a minute um but yeah we have we have this coming in but obviously we want each one of these to actually be different and how can we do that um and the easy way to do that i'm going to do fill and because the panels are going to have colors that are used in more than one way when this is all said and done i'm going to do a variable here and fill is an svg property uh panel i'm going to panel color and just like that and it's not defined don't have anything here so it doesn't actually do anything so you can see they all stay like that but let's just say we had a fallback of red they'll all change over to red so fill is an svg property we can style with css and change them so yeah to be able to use that now we don't actually want to go to the icon itself we just want to choose the accordion panel itself so we can do accordion panel and child and i can choose the first one and we can use this panel color and i'll talk about that underscore in a second but we can make that one red you can see that one is switched over to red and really fast here we can make the second one here which would be my second one and we can make that one blue and that one is switched over to blue and i love this i love doing stuff like that and this idea of the underscore something i haven't used the idea has been around a long time i think it was uh lea veru who coined it but i could be wrong i do apologize if it was uh if i'm mixing up um i'm saying this off the top of my head so it's possible it was someone else um and it's this idea of like a private member basically saying like this isn't a global property it's something that is just for this accordion and the only reason to do it is just to sort of do this indication if don't go looking for accordion panel in the root look for it in the parent of this component basically um and you know that it's not something that's going to leak out because we have inheritance and everything when it comes to custom properties so a nice way to keep it sort of contained within um so i'll set these up and i'll be right back with you so there we go i've added some nicer colors to each one of these panels um right there and i've also fixed the reef i just had a typo um in my svg link and i'm just going to bring these up here uh and paste them just so they're we have a recording panel and then we have all these nth children setting the colors on there so there we go that is sort of the beginning of what we want to have set up obviously we have quite a bit of a ways to go but i think it's coming together already now the problem we have with the panels is they're too big because we have content in here which is normal the content is making the panels grow and that's exactly what we'd expect but in this case we sort of want to hide things away a little bit and that's where things get a little bit more interesting uh so we're going to style up the panels themselves a bit more now and you know how how let's just come here for now and let's say a height of say a hundred pixels uh and then you know that's coming so okay we can add an overflow overflow up hidden on them and we sort of get what we want but how can we decide what height they should be that that could be problematic and actually well we want them stacked at smaller screen sizes but i sort of want to go with what z did and get them next to each other at larger screen sizes so one way we can actually do that is because the parent is a display of flex it actually works really well because it allows us to use flex basis and that means that if my flex direction changes so we can switch this over to row the flex basis is always the the size on the main axis so this way the main axis is this way so we're controlling the width but when we change this to column then we're switching the main axis and now it's becoming the height and in this situation it's it's not often i find a really good use case or flex basis over using just a width but this is one of those times it just works out wonderfully and just because i know how this is set up i'm gonna this is like for demo only so let's just add a little demo only that i'm gonna put here and you know what let's just grab that and i'm just gonna just so it's not like stuck to the top of the screen i'm gonna add in a margin uh margin top of like 10 ram um whoops i don't want that there though i want that here sorry uh just we can have that set up so there we go um it has room for my face but also just always drives me nuts when things are stuck to the top of the browser there okay so we have the flex basis but how can we decide how big that flex basis should be well ideally we want to have a little bit of padding on here right um and we also want to have on the panel itself a bit of padding and we also have what like our trigger that's going to be right there and so for me the best way to do it is let's add those uh or we already have a height on the button um but on the panel itself or actually what let's you know let's come down uh to where we had the trigger here just really fast i am gonna add a display of flex on here which doesn't really change much but we can do an align items of center just to center it that way we can add a gap of say one ram and then i can do a flex direction which i often don't do either but i'm gonna do a column reverse and that should have been a row reverse uh just just put the icon on the left and this on the right makes it look a little bit nicer and then the other thing you'll notice is this small space that's coming right here and that space is because our accordion trigger here is a button which has some default padding on it um so i'm just gonna come here and say padding of zero and it gets rid of that so we're working a little bit from a better place uh and now we can come up and set up this accordion sorry for jumping around a little bit um but yeah over to the panel again now and so yeah the flex base is here we sort of want to base it on some sort of padding that we're going to be putting on these rather than having it on some arbitrary thing so what i'm going to do for that is i'm going to come here and we're going to do we're going to create a few custom properties and i'm going to they're sort of you know custom they're locally scoped to here so i'm going to use that underscore on there and the first one we're going to do is set up the button size and i'd use three ram for that and then the other thing we're going to do is panel padding let's go in with like a 0.57 ram the nice thing with having these here is they're also going to be really easy to customize and to add stuff to and change stuff uh you know if you want to put in different values here everything's going to be controlled here which is always really nice as well but it's going to let us do some nice stuff so on here we can on the panel itself we can add that padding so padding was my bar panel padding right there hit save we get our padding and well this won't change anything it will make it just so it all works together where on the icon itself the width here i'm just going to do my bar and we can get the button size on that everything stays the same but it just makes means that we can update things over here it also means we have reference to that three ram because that's going to be important now when we set up this flex basis where i'm going to do a calc of my bar panel padding plus my bar panel or button size there we go hit save and now it's exactly what i want it to be it looks very broken at the moment don't worry about it yet we're going to fix it one of the reasons it is very broken right now is if you remember where we had headings and stuff in here um so if i come and take a look we have this h2 has that big padding that's on there um right so we have that and then we have that going on which we don't really want and in general margins are going to get in our way here if you have a reset that already you know you might use a reset that gets rid of margins from the beginning i'm not going to assume that you do that so i'm just going to say here uh accordion and star so anything that's a child or descendant i should say not child but anything that's a descendant of the accordion will get a margin of zero and that will start fixing things for us a little bit the one thing i just realized in doing that is when i did the panel padding plus we have the button size here uh it's adding the panel padding but it's not enough we actually need this to be doubled because we have padding on both sides so that's easy to do i'm just going to wrap that in parentheses and do it times two so the full calc there just so we can see the whole thing uh so we have a calc and then we have that plus our var button size so we're multiplying this by two and now you can see that it's actually starting to work a little bit better and i do believe we need to wrap that in parentheses just or we probably don't need to wrap that in parentheses actually it does i'm pretty sure css does order of operations so it would actually do the multiplication before the addition but just to be safe um and it makes it a little easier to read i think um it is a little bit weird when you have custom properties that are mixed in with these things but i do think it you know we shouldn't be playing around with this once it's set up everybody should just be coming up here to make changes and stuff anyway now ideally we wouldn't actually see this text here and we're going to fix that in a minute but uh let's come in with the border radius on here first actually and the border radius is a bit of an interesting one on these panels uh just because at these sizes so i could do a border oops sorry we could do our border radius on them all and just put a really big number and it makes a nice pill shape the problem with this is when they become expanded so let's see how we're going to do our expanded one and i mentioned we're going to take advantage of the fact that we have uh let me just go find it this area expanded of true right here so on the panel one uh my button has the area expanded of true and i want to take advantage of that so i'm going to do this using some modern css so we're going to say that panel uh or it's recording panel has and then in there we can do an attribute selector of area uh expanded i was going to do hidden is equal to true and then we can give this a flex uh i'm going to say flex uh for now let's just do a flex basis of like 500 percent just so we can see that it's different um or maybe like 2000 percent uh or something like that um just so we actually have like a height that's coming on here something okay we're stuck there i'm making it really big but whatever that's what we have but to show you it's getting bigger now this selector obviously um is using has which browser support is definitely not perfect for even though it's not terrible uh but it's not perfect we are going to be using javascript along the way here so if you'd prefer not to use has you could just have like a class or a data attribute that you're toggling on the panel itself so we just have to put something on the panel here that could get toggled by javascript and it would work exactly the same way i just i love has so i'm going to use it along the way with this one so if there is an area expanded of true we're going to expand the whole thing i think that this is such a great use case for has um so yeah it gets expanded and gives us this really ugly border radius that works perfectly at these smaller sizes so how can we figure out a border radius on the panel here they would actually work and interestingly enough we can take advantage of the button size to be able to do it because basically and we also actually not just the button size we want the panel padding um basically if your border radius is half the size half the height of an element it will give you this perfect shape like this but ideally i want to keep that exact same radius here even when it's expanded so right now this radius here is actually the height divided by two so what we can do is because this is effectively my height i'm going to take that and put it here but because i want to take that height and i need half of it to be able to keep that border radius the way it's looking i'm just going to take that entire calculation that i was doing let's stretch this all out i'm going to wrap all of it and over here we can do a divide by two and now see how it changed a little bit so let's go take a look and now the border radius here is actually maintaining around the circle here and it looks really nice but on these ones it stays exactly the same and it doesn't matter how big or how small it gets it's always going to work out um so another reason why these custom properties are nice because again if we come up to these and i ever change this down to a two they all update all at the same time uh or if i change my padding it all updates at the same time and so it works out really well now if we jump back down to my here where i have this gigantic flex basis on here um instead of using a percentage like that if we come in with fixed units we can actually get something that looks a little bit better so i'm going to use a clamp just to make sure it doesn't get too big but the idea here is um as this shrinks down you notice how it's like a little bit responsive so it's smaller screen sizes like we just want to make sure like okay it looks pretty good here but as it shrinks down it will actually shrink a little bit um if we have a smaller space and i think it should work out okay with the text this would depend a little bit the sizes that you're putting in the clamp but basically i don't want to be too tall i don't want to be too small but when it's opened i think that looks okay um and yeah we get that set up nicely and so now you can see the last thing before we worry about the interactions is the text that i have down here so what i want to do ideally is hide that and we're going to sort of do it in two ways so if we come take a look we have the accordion content here but the content has the paragraph as well as an image inside of it so if we come down i think my image is right there so we could come right here um and we could say accordion uh content and just choose the paragraph itself i could of course just give that a class that would work as well but i didn't so we're just going to do this uh and i'm going to do a transform and we want to move it down so we can do a translate on the y-axis and i'll just do like to ram uh not negative i always think negative to go down there we go so it's a little bit of a cheap way to like move it off uh but we'll also come and say the opacity is zero because when we add the interaction here it's just going to look a little nicer if it's also fading in um and i guess for now we'll leave our titles like that we're going to do a bit of work with that but i think it'd be really nice to add a little bit of interactions we can actually see this working so let's hop into our javascript and get started so what do we need well we need to get our accordion itself so we'll just say accordion is going to be equal to document dot query selector and i'm going to choose my accordion and that's actually the only thing we're going to have to choose here but we get the accordion right there and so on that accordion i'm going to add an event listener so add event listener now we could have chosen each of the panels inside but for that then each one has an event listener on it this just makes we just do one event listener it makes it life a little bit easier so we're going to say a click and when someone clicks yeah stuff has to happen now the trick for this if we only want one event listener is we have to pay attention to where it's being clicked on inside of there so we are going to put e here for the event so we can actually um track what's going on and for now i'm going to do a console log just so we can see because i'm going to do e target um and what that means is if we come and take a look here and so yeah when when i get in here if i click on something now you can actually see what i'm clicking on so i clicked on the title i clicked on uh for actually for most of those i'm clicking on the title um but we're also here's the image if i probably go far enough into the padding or something i'm guessing it's so it knows exactly what i'm clicking on i mean there's the i'm getting the us for my svg so we can track exactly what we've clicked on and what's interesting here is you can actually choose something using i'm going to use closest and when we use closest you can choose what so i'm going to say accordion panel and now if i click on one and i did it wrong because i misspelled closest let's fix that and now when i click on it it it was looking like okay i clicked on the svg but it's going to keep going until it finds the closest panel that i clicked on so in this case it was if we go and take a look you can see it was panel five if i click on this one and we go and take a look we can see that it's now panel one so it's using this is the a really nice easy way to have one event listener that's taking care of everything so what we can do now is come in with a variable for that so i'm going to say cons of active panel is going to be equal to the panel that we've just clicked on nice and easy now there is one problem with this um and so let's actually let's do this console log active panel so this should give us the exact same results we were having before you know the panels are coming up the problem is um if we click in between them you can see it's coming up with null because there's nothing because we're tracking for the entire accordion which means these spaces in between them are actually things that could trigger things so the way we can avoid that is if we come here we could say that if we do we could say if active panel return and that means if there is no active panel the function just stops there so now if i'm clicking on the panels we're getting something if i'm clicking in between the panels the function's just going nope that's not an active panel we're out of here i'm not going to do anything else and so that way we know it's only doing things when we actually want it to be doing things all right so we can get rid of that console log now and we can keep on going now we're going to have a lot of stuff to do here so i'm going to create a function and it's going to be called toggle accordion and the toggle accordion is going to say panel to activate so when we click on something we need to think a little bit about what we want to happen so let's go look back at our html for a second and so when we click we're getting the accordion panel and inside the accordion panel we have the button that has an area expanded of false that will have to become true and we have the div here with our accordion content that is currently area hidden true which will have to get turned to false that's on the active panel but all the other panels we need to ensure like the one that was active we need to make it non-active right so we have the two different things that have to be going on at the same time so let's do that first by getting all the buttons so we're going to say const buttons is equal to uh panel to activate and then we can say that we're going to get the parent element and we'll look at why we're doing that in a second and then we can do a query selector and we'll look for every button uh we could use the class here if we the what was it accordion trigger if we want but we only have that button so it should be fine and so now let's just do a console log on there of my buttons and so if i click on one of them we should get the all the buttons showing up and right except i just realized we didn't want this to be all we don't want one button we want all the buttons so we're doing a query selector all uh right there so buttons get all of them so if we do that let's go take a look we can inspect uh and if i click on one of them console you can see we're getting the node list with five different buttons in there so we're getting every single one of them and why that's useful is because instead of like trying to figure out which one is actually the one that has you know which one are we turning off which one are we turning on uh to figure out which one we're turning off we can sort of go a little bit easier and just say buttons dot four each and here we're gonna say button because for each button that's inside there and we'll use an arrow function because we'll do something and now what we can do is on each one of those buttons we're gonna say button we can set attribute and when we set the attribute we want that area expanded and this is where i said we're gonna we're gonna cheat a little bit we're gonna say area expanded is equal to false and why would we want to do that right that seems a little bit like a strange thing to want to do to set them all the false but it just means that if we come and look in here um let's just move that down a little bit and we'll find the button so right now this is area expanded true if i click on this one that first one becomes false now they all become false but that's fine we're setting the one that was equal to true is becoming false so uh a nice easy way just to sort of cover all our bases shrink all of them down but just as that's happening we can also then say that the panel to activate query selector and we can choose the button that is inside of there and on that one we can set the attribute of area expanded and make that one true so i'll just bring this out make it a little bit easier to see what we're doing so it's basically exactly what we just did here where we were setting it to false the current button of the panel we've clicked on after this and this is important this comes after that or nothing would happen uh but we're saying the button for the one that is currently being clicked on we're going to set that one to true and that true because of my has selector is setting the size on all of these so now whichever one i click on is getting the area expanded of true and that's what's making it grow and fill the space that we want it to so that's kind of cool and then we can use that same trick for the content inside so if we go and get the content for each one of those const and this time we say content is contents is equal to panel to activate parent element query selector all and in this case we want a dot accordion content right because we want to make sure that we're getting all of the different ones and so for that we can sort of copy what we did here and paste it but switch that over to contents and then for each one of the individual content pieces or divs that are inside of there the content set attribute and in this case if you remember we had area hidden of true we want to set it to actually we want to set them all to true so area hidden on all of them will get set to true so that makes sure whichever the old one that was activated is now becoming deactivated and then we can take the same type of thing that we just did here but do this for my dot accordion content set attribute of area hidden and set that one over to false and hit save and prettier here just broke that over multiple lines but exactly what we just had so let's just do that for this one too to make it a little bit more consistent and I guess easier to read at smaller sizes so basically this is making all of the panels inactive and then we're going back and reactivating the one that we want after that so that should work perfectly fine and if we come and take a look again we see that that's actually working and if we inspect on that we can go and take a look there is the area hidden is true and we're currently on this one so if I click the area hidden has now gone over to false if I click back it goes back to true they go back on the second panel it goes back over to false so that's working and we can also that's on the content itself and if we were to look inside here at the button we get the area expanded is true if I click there area expanded is false and then back to true so everything on that side is working perfectly and that's all the javascript we actually need for this to work is set up right there so now we just want to style things to look a little bit nicer which is pretty we have a sort of could go a long way but let's just add the animation in to start with because right now this is kind of ugly that it's looking like that so to be able to do that right now I mentioned we were going to use flex grow and we're going to look at where flex grow is going to come into this whole thing right now we are using flex basis so here's the where we're using the flex basis and that's the big size here and then the rest of the time the flex basis we haven't actually or we had set this one so it's smaller and luckily flex basis is actually something that we can transition so we can say transition flex basis and for now it's a safe 500 milliseconds just so we can actually see it in action you got to spell transition properly transition there we go look at that nice and pretty it looks pretty good right and then of course when that happens we also need the content to become visible so let's fix that up as well we're here so we can just take that actually and I'm going to copy it here and then we can just say that the accordion content p so it's a bit of a long selector if you don't like that you could of course put something else here but the paragraph that's inside accordion content that's inside of here you could probably get away with actually just doing this because I think it's our only paragraph that's in there so it depends a little bit on the structure I'm going to do this just to be on the safer side do we need to do that maybe not maybe we can just get away with doing it like that and again this could have a class on it and then basically we can just say take those two put them here put this down to zero we don't need a unit so let's get rid of that and the opacity goes up to one and of course we can transition those transition transform 500 milliseconds and my opacity at 500 milliseconds and now we will run into a bit of an issue because it's going to be hard to read the text and that's something we're going to want to make sure that we can do but you can see it looks a little bit nicer when it sort of like fades you know especially as the panel's moving up it sort of comes up with it but even if the panel's not one that's moving you know we sort of get this little transition as things go back and forth a little bit that I think makes it look a little bit nicer one thing that would be even better though would be if the text here was actually lined up with the title so we can come down to here and the only thing we have a different ideas and how we could select that because right now I have an idea on my heading we could style the button itself because you know we have the accordion trigger and the but the text here is inside of that as well so there's different ways we could sort of approach styling that one I'm going to use this but if you'd rather you know we could or you know what maybe we'll do this class is equal to accordion title accordion title like that just because this is maybe the trigger you don't really realize when you're looking at this that the button is is bigger than what we're looking at here and we have this too so we can see our button we'll we'll fix that we have some additional styling on the way but let's come in and start that here we can do accordion accordion title and let's just say font size is 1.75 rem so it gets bigger and there we go and I've already set it up on all of them so we can see that's coming in and we probably want a font weight we'll say 700 on those as well there we go looks a little bit better maybe a little bit big so we can drop that down just a little bit and there it is a little bit hard to read and it's going to change a little bit at the different sizes but for now let's just get this lined up with what we have there and this is a little bit tricky actually to do in a sense but to be able to do it if we come and take a look at the button itself which was our trigger so let's find a trigger on here I was using a display flex with this gap of one rem and what I'm actually going to do is change this over to another one so we're going to say gap accordion and we'll say panel gap panel gap and then we can come all the way back up where we had this and we're going to set the same thing panel gap of one rem and the reason I want to do that is to be able to get this to line up properly we need to add a margin or the easiest thing in my opinion is to add a margin to the left side of that so that's my accordion content and specifically the p here so we're going to add a margin on here margin left and this is a little bit of the tricky part and what we need is the size of the button plus that gap that's right there well we have both of those so we can come here and use that button size that's right there except this should be in a var of button size plus my var of button our panel panel gap and there we go it lines it up perfectly because we're putting those two sizes together it's also really hard to read this and there's a few other things that we'll need to fix the other thing that I don't like is the space on this side it would be nicer so we could add a margin to the right side or we could just come to our panel itself when we set all of this up and we set up the padding we could do this as a you know just continue the shorthand but just to make it really explicit I'm just going to take this and do a calc here as well and do like times four or times five just to add you know we're increasing the padding that's on this side by a lot more so if ever you increased or decreased your overall padding it just sort of helps keep the balance a little bit on both sides by having those and again you don't have to sort of use the long hand here you could do that as a shorthand and just continue it it's up to you but they both work so there we go that's set up so one way we can actually make it a lot easier to read especially this text is let's come and find my image next which we'd already played with here and what I'm going to do is we're going to take another advantage of our accordion panel has that we're going to take that one and we're going to say that the accordion accordion I can't spell accordion you'd think by now I'd be getting better at it we've written it so much we're going to add a filter to it and filters are fun especially for images because then I can just take my brightness and do it at like point five so it darkens it so anytime we're on one we have a dark image now it doesn't look very good when it just like switches over on us like that so the other thing that I'm also going to do on this one is let's come on the accordion image with the brightness filter we can transition that as well so transition filter 500 milliseconds just to stay consistent and then as it comes in there we go makes it a lot easier to ensure that our text is readable and the other thing I'm going to do since we're adding that darkness that comes in and this is coming and everything's sort of all happening at once I think what we could do here is actually come to when we did the content itself we have the transition of the transform in the opacity we could add in a small delay here of like 250 milliseconds on both of them so now it just means like it'll go dark and then it sort of comes in a little bit after I just think it looks a little bit nicer and I sort of like that so it's starting to come together we need to do two more things and then I think we can get on to the responsiveness of it before we can get into like fixing up some of the the color things and a few other little small details around the way and that is one of them is with the overall animations that are happening the little ones like this moving in I don't think are too big of a deal but this is a lot of movement so what we could actually do for that is this transition right here on the accordion panel I'm actually going to remove it from there and I'm just going to come down and put it here in an at media refers reduced refers reduced motion no preference preference and on the accordion panel we're going to put that in so right now it's going to look exactly the same way that it did but if ever somebody's comes onto the page and they actually have set things up so they prefer reduced motion on their system so if I come here and I do prefers reduced motion you can emulate it so I did a control shift p or command yeah control shift p mac would probably be command shift p in the dev tools and then I can type that in and that just means that it will jump and go like that remember it is prefers reduced motion and not no motion so for me that fading in I don't think would be something that would be problematic especially the the background transitioning wouldn't be potentially you might want to put this little at the moving up maybe the opacity changes could be something that gets put in that as well so yeah if we come down and find that other one where we had that transition which was this on the paragraph we could come and move that from here the transition could just get put inside of course you need the selector as well since I'm not using sass and I can't nest media queries so there we go uh so now it just comes in like that the little change on the background I think is completely fine and like that we've made things a little bit easier on people or improve the experience um so let's do prefers reduced motion do not emulate and we go back to what we had originally where we have a little bit of motion going on just like that cool so with that done what do we need to do I want to make the titles as I said a little bit more obvious because we really lose it if it's on a white background or if you had different colors potentially on different colored backgrounds so we'll do that we'll make it responsive and then we'll fix our focus states and keyboard navigation a little bit the keyboard navigation definitely uh does work right now so that's a good thing because we built it properly with buttons from the beginning uh so it it works the way it's intended to but just the styling of things is not fantastic now I am going to be turning these sideways and we're actually going to lose the title visually which isn't ideal uh but we're going to do that so I actually just before we get to doing that if you want to just keep it as an accordion that's like this it's probably has a little bit more information in it so it's probably a better way to work so if that's the case the part I'm doing now I'm going to put in a media query you just wouldn't put this in a media query you could include all the styling here but I'm going to do an at media we're going to do a max width which isn't too often but I just don't want to have to rewrite like I don't have to remove these styles at larger screen sizes so mobile first isn't always it should be path of least resistance right so this is a path of least resistance where I won't have to reset styles down now I'm going to be using 45 m for my media query so for this for a min width so that means for a max width I need to do this one and I'm very much looking forward to range syntax getting better support so we don't have to worry about these stupid things where there's that one pixel crossover but yeah we're going to do a max width like that and have an accordion title and for this we're going to use a pseudo element actually to bring in the background on it because it's going to look a little nicer so let's on there do a after and actually because that's going to be a pseudo element we're going to come here and do a position of relative right there because this is going to get the position of absolute position absolute like that I want to make sure that the height is actually the same height as what we have here so I'm going to do a height of var and that was our button size so it's going to have the right height on it for now let's give it a background background of pink so we're actually be able to see it and then the question is what's the width so let's just say a hundred percent for now and it's not showing up because we're too big on our screen size let's shrink that down there we go it's appearing so uh there it is so okay first let's come I guess we can give that a left of zero and a top of zero for now this might get changed but uh we're getting it there and the height is okay it actually needs to move up a little bit we'll get around to that in a second uh but how big do I want to make it I don't actually want it to be a hundred percent I need it to be bigger because I wanted to go behind this and I want to stick out on that side a little bit so for that I'm actually going to do a var um so we're going to have to give it something actually but before we worry about that let's come here and just get this behind so z index of negative one we lose it so we can come back onto the parent and isolation isolate like we looked at before just to prevent it from going behind anything else it's sort of stuck this is a new stacking context we could use a z index on there as well but there we go that is set up properly but we want to fix the sizing of it and the positioning of it a little bit and to get this actually centered properly I'm going to take off this top one hundred percent and this is our zero I should say and the reason I'm taking that top off is when we use position absolute we can actually use it with grid so I'm going to turn the parent here into a grid container and when I do that nothing will change but then we can do an align items center and it will center that within the space if we have the top zero on still that top is locked in at zero but without the top zero there it's centering it within the parent and it works perfectly so it's centered at the right height now I just want to worry about the width of it so for that width a hundred percent too small but we definitely want it to be a hundred percent and then we could say plus var and then we can on there say my button size and that's not really going to be enough because we're I'm just going to double this basically so let's select all of that wrap it and say times two so it becomes much bigger and then that's my left here can actually become my var panel gap probably won't be enough but let's try that times we'll do a calc on this calc take the whole thing times negative one and see it's not quite enough so then we also want to like ideally it's actually going to stop like right around the middle of this to get the right size or actually we could pull it the whole size back so panel gap plus var button size oh the times negative here that I was like why is that not working it's because we're doing this times negative one and then adding that so we want to take all of that together and then multiply it by negative one that's the order of operations kicking in there we go so it's lining up perfectly with the button over there and then we could add in the border radius of 100 bw it doesn't matter makes it a pill shape and we just need to bring that icon up ahead so we had the icon we could just on here do a zindex of a big number you'll notice I don't have a positioning on this but because this is now a grid item because I added the grid to the title thingy the zindex will work on there or actually no it's not because of the grid it's because it's a flex item because zindex works on flex items as well because the the parent for though I was thinking grid but it's just the title that's the grid there so there we go that is coming through and we get that so now of course what do we need to change is the color here and for that we can just do something you know come in with a dark colors we had something like that that we were using before maybe a bit darker 80 that's way too dark it's working it's way too dark though maybe oh maybe the five was okay that does look better actually and it just makes it so we can actually see them and then we can get them to come up everything's lining up the way we'd probably want it to line up and I think looks pretty good overall I'm really happy with how that looks at this stage so let's make it responsive like I said and then we can in improve on the keyboard navigation of the entire thing so to make it responsive we can make the screen a little bit bigger again and the main thing there won't be too much work to do I don't think but the main thing we want to do is let's go find my accordion itself we had this set up so right after that we'll do an at media min width and I said 45 m and we're going to do a flex direction of don dot accordion and flex direction we'll get switched to my row now so then they go that way and already it's sort of working though things look a bit weird and you can see the text is really getting muckered up because the sizes of everything are shrinking and growing and I find it's the sizing looks a little bit off right now so there's definitely improvements that can be made along the way here to what it's looking like but it's it's not a bad start and it's actually working so let's look at how we can improve this a little bit more and one thing is right now they have like the the size of the height is actually shifting a little bit notice how like if I go on this panel because there's less text it shifts a bit and when I go on that one it actually increases so the like the amount of text that's in each panel can technically cause things to shift there we go so on this on the accordion itself I'm also going to come in and give this an actual fixed height which is not something I do very often but on something like this I do think it actually makes sense like I don't mind this is the type of component where you might have a fixed height on something so there we go that's I think working pretty good the other thing it's hard to see but the whole width of all of these actually changes a little bit depending on the text as well and that's because we're using display flex and so this is in a container and actually let's go grab my that container all the wrapper I should say let's put an outline on this outline of two pixels solid red just we see it notice we have this extra space leftover and that's because these are growing using that flex basis that I set up for when we were the other way and the flex basis worked super super super well it was perfect basically right it did everything we needed to do and I want to keep the flex basis working but the other thing that we want to do here is and we're going to try something I was going to put this in a media query originally but let's also just add on here flex grow of one and notice now it's actually taking up all the available space and that means now it actually can go and it's allowed to grow and because it's allowed to grow it can take up more space I'm going to take that flex go off for a second just so you can actually see something that's interesting is when these are moving notice like the icon is moving perfectly along with the growing the shrinking on all these sides if I turn that flex grow one on here when that happens there's sometimes like a bit of a snap jump at one point before things it just looks a lot less smooth for some reason and that's because this is transitioning but the flex grow is not transitioning but now at least it's filling up all the space and let's just shrink that down again so we're at this side and over here everything is looking really good there's no issues so the flex grow isn't breaking anything here because we don't have a fixed height but we could add a fixed height too if we wanted to but at these bigger sizes it's a little bit off so we don't actually need a media query to get this to work which is kind of fun because I was going to have some extra stuff in there but what we do want to do is where we have the transition with the flex basis of 500 milliseconds here I'm going to also do a flex grow and also put that 500 milliseconds with it so when we do that now it's a little bit snappier and notice like the icons and the titles don't it doesn't look like anything like jumps it doesn't look like anything's off it just sort of works the big issue obviously is the text that's sort of crumpling away and coming back out we could do things that could fix that a little bit for both directions but for me what I'm going to do is know we were playing with the opacity so when we open it it's a little bit less noticeable so let's come up and find that opacity when we're saying here the opacity and we had that transform they were taking 500 milliseconds but we had this delay here but I actually want this delay we're only going to have it show up afterwards and we'll play with this a bit more in a second but by doing that it only comes in when like the animation's finished and then the text comes in so we don't have to worry about it crumpling or uncrumpling or anything like that right so it's it's causing it's doing its own thing along the way and then it just comes in but of course on the way out it's crumpling away which we don't actually want and what we're actually going to do is instead of having this here we're actually going to add this part here instead of just on accordion content and we're going to take off that so we have the same selector we had here and the reason for that now is we're going to transition it only in one direction when we click to another one it just disappears the text and it hides it so it's only transitioning when we're opening a panel and we're not transitioning when we're closing it and that's fine because no one's really looking at the panel that's closing their focus they click here their eyes are there and they're paying attention to that so we'll worry about the transition there and when we click off we're not too concerned about it and again it's within our prefers reduce motion so we add it in there we go anyway i think you get it uh before i start rambling again uh so that's looking all right now let's turn off that red border that's kind of ugly so we can get rid of that now let's fix our keyboard interactions because everything's i mean the keyboard interactions are working everything's fine uh and it should work regardless of the screen direction you can see it's working like that uh but it looks kind of ugly the way the buttons are getting selected so there's a few different choices we could make for how we're going to do this but for me i want to take i think the best thing to do along for whatever we're going to do is to take advantage of these colors that we've created to begin with to use them in in another way but where you have some choices is how things are going to get set up and then actually there's a performance improvement we can do on these as well because things are shifting here we want to make sure that those shifts don't impact anything else so we'll come back to that in a second but for now let's just say that we're going to that has the area expanded so i'm going to come here because we're still on the accordion panel and i'm going to say accordion trigger first actually accordion trigger and on here we're going to do an outline of zero which you never ever ever want to do this is the one situation where i'm going to say we're going to use it because now if i'm keyboard navigating i don't have anything showing me that there's anything happening the reason that i'm doing that and i'm sort of grouping it over here and you know this could go with our other accordion trigger class but here i'm going to say accordion panel focus focus within and on there we're going to bring the outline so we're going to say outline and we'll do like a three pixel solid and we can use our panel color to be able to do it so if i hit save now and now i keyboard navigate look it highlights the entire panel using the color of it which is kind of fun and then on top of that and it sort of makes sense because the entire thing is clickable anyway so i think that's a fun way to do it and just to make it a bit more we'll do an outline offset of like three pixels as well so now look at that i think that looks pretty good maybe we'll make that four or something just to be there i think it looks a bit more balanced and it's looking pretty good and now if we select it with our keyboard it stays highlighted this is the one place where maybe you want to make a change to how it works because if i go now to my keyboard navigation there's nothing highlighting it but if we're keyboard navigating only then it's being highlighted so it depends on how you want to work if you were to try this with a screen reader i've tested it on windows it works really well because of everything we've have it how we have it set up but yeah there's just this thing where we lose focus as soon as you touch with the keyboard except if you click on the icon or if we were in the mobile view if you click on the empty areas it's fine but if you click on that it brings it in so if you don't like that that it could be a little bit different depending on where somebody clicks which granted is a little bit weird we could have that as focus within so you could use like javascript to add focus even if they click on the panel itself or there's different sort of approaches you could do to find a fix depending on if you feel like it needs it or not but overall i'm pretty happy with that but we did say there's a performance improvement that we could make and what that is right now things are moving when i'm clicking and if i switch the screen to this way and now i'm clicking things are moving but everything because there will always be one panel that's open which is kind of important for how this is working is always one panel and one panel only and we're starting with an area expanded is true on one of them so one of the panels always expanded and so that means the rest of the paid like this is sort of the self-isolated little unit with all of this coming down like together so because it's very self-isolated what we can do is come over to here and what i can do here is put in a contain and content and this pretty much means that the content here is self-isolated this is a shorthand they can the content it's a shorthand value which is the equivalent of the layout the paint and the style so it's basically saying all of those things the layout that's in here everything else is isolated and it the the elements inside have no influence for the layout the styles or anything for stuff that's outside of this element and it it just helps with the performance a bit because as things are moving around the page knows it doesn't need to recalculate layout stuff for things that are outside of this element everything is locked in if we were doing it as a more traditional accordion where you could have multiple expand and the element grows in size or shrinks in size i think there could potentially be issues though this doesn't can contain content doesn't include size because you can also contain size on elements so it might not actually be an issue either way but it's basically saying we're just helping performance a little bit by saying this is a little self-isolated thing where the content inside of here shouldn't be influencing anything outside of it and now one thing i did do in this video is using the area expanded is equal to true which is sort of an idea of semantic css where we're using some of the semantics that we're building in through area attributes for interactions and all of that and using it within our css like this if that's something you'd like to know more of and sort of explore more of i have a video where i talked about that and you can see it right here and with that i would like to thank my enablers of awesome who are michael simon tim and johnny as well as all my other supporters over on patreon and of course until next time don't forget to make your corner the internet just a little bit more awesome