The Art of Creating a CSS3 Accordion with Custom Styles

In today's digital landscape, user experience is key to engaging and retaining users. One way to enhance the usability of an interface is by incorporating interactive elements like accordions. A well-designed accordion can provide users with quick access to relevant information, making it easier for them to navigate through complex content. In this article, we'll explore how to create a CSS3 accordion from scratch, including custom styles and functionality.

To begin, let's start with the basics of creating an accordion using HTML and CSS. We'll use the `accordion` element, which is part of the HTML5 specification, to create our accordion. The basic structure consists of two elements: the title and the content. For this example, we'll use a simple title and content combination.

To style our accordion, we can use CSS to add some basic visual appeal. We can start by adding some color and background properties to the elements. For this example, let's use a yellow highlight at the top of the title to give it a subtle visual cue.

In CSS, we can use the `rgb` function to define colors. The `rgb` function takes three values: red, green, and blue. For this example, let's use `255 255 255` for a white color and `0.1` for a subtle highlight.

Next, we want to add some depth to our accordion by adding a subtle shadow effect. To do this, we can use the `box-shadow` property in CSS. The box-shadow property takes four values: horizontal offset, vertical offset, blur radius, and color.

In this example, we're using a subtle shadow effect to add some depth to the title. The `box-shadow` property takes four values: horizontal offset (0), vertical offset (-2px), blur radius (5px), and color (#fff).

To make our accordion more visually appealing, let's also add some borders around the edges of the content. This will help separate the title from the content.

Next, let's add some functionality to our accordion. We want to make it interactive, so when the user clicks on the title, the content should be revealed or hidden.

To achieve this, we can use JavaScript and the `accordion` element's built-in functionality. The `accordion` element has two properties: `expanded` and `collapsed`. When an element is expanded, its `expanded` property is set to true; when it's collapsed, its `collapsed` property is set to true.

In our example, we'll use JavaScript to toggle the `expanded` property of the content element. When the user clicks on the title, we'll add or remove a class that toggles the expanded state of the content.

Next, let's style our accordion using CSS. We can use borders and colors to create a visually appealing design.

To make our accordion more engaging, let's also add an arrow at the right-hand side of the title. To achieve this, we'll use CSS borders and positioning.

We can position the arrow at the right-hand side of the title by setting its `left` property to a negative value. We can then rotate the arrow using the `transform` function.

Next, let's add some interactivity to our accordion. When the user hovers over the title, we want to highlight it and change its background color.

To achieve this, we can use CSS hover effects. We can set the `background-color` property of the title element to a different value when it's hovered over.

Finally, let's add some accessibility features to our accordion. To make it more accessible for users with visual impairments, we can add a text description to the content.

By following these steps and using CSS3 styles, we've created a basic CSS3 accordion that provides a good user experience. The accordion has custom styles, including colors, borders, and shadows, as well as interactive functionality that allows users to expand or collapse its content.

"WEBVTTKind: captionsLanguage: enwell hello everybody welcome back to css3 in 30 days today is day number 23 and we're going to be building a css3 accordion this is what i'm talking about over here an accordion is simply grouping of elements and content and typically uh how an accordion would work is that when you click on say a tab that content expands and if you click on a different tab that content expands and it contracts the other or retracts the other content now typically this would be built in jquery or javascript but the fun thing about this is that this is built exclusively in css3 now there is a little bit of a limitation here and perhaps i challenge you to find a way around it with exclusive css3 when you open an accordion item if i click on this item again it doesn't close it and that is because of the limitation of using css in this case perhaps that's not a big issue for you if you want to leave all of the content open at once perhaps there's a different work around but the way that we build it today it's quite simple and it will allow you to build an accordion very quickly in your own websites displaying content displaying services or whatever it is that you want to use for an accordion so let's jump in and get started over here in my code editor i have day number 23 css3 accordion opened up give yourself a moment to download those and open it up in your favorite code editor and then open up your index and sandbox.css of course as always final.css is available for your reference and let me show you the index.html first this is the markup in our sandbox here under the level 4 heading we have a div of the class of accordion and then a div with the class in within that of accordion double underscore item and then we have an a tag with an href that that navigates to an anchor tab one and then a class a couple classes in fact simply for styling and then we have a div with the idea of tab one and the class of accordion content and then there's two other identical setups just with tab two and tab three now what happens here is when we click this this link it navigates the browser down to this so it's an anchor and then it navigates it down to this div so this is looking for tab one the id of tab one it pops down to tab one and you can see that when you just click on the base mark up here so if i click on accordion one it pops to that content right there according to it pops to that content coordinating three pops to that content and that's the default functionality in the final version it doesn't do that we're going to be using that as a way to animate and display this content so that's how the markup is set up let's jump into our sandbox and get styling now a lot of this styling is going to be just i guess cosmetic the functionality of hiding and showing it is actually quite simple and you'll see that in a moment but we're going to make it look a little bit better because why not so let's style just accordion position relative display block background color we're going to make it white and then border solid 1 pixel and then to go e-o-e-o-e-o all right so now we're going to say accordion double underscore item display block and that means we're styling this entire item here so it's this whole piece so there's the accordion which wraps everything then there's accordion item which wraps the entire item within there and then there's more elements so we're going to display that block and we're going to say accordion and then accordion content and then we're gonna go display block padding zero height this is important zero we're hiding it and we're gonna say overflow hidden so we're hiding any of the overflow because there will be an overflow when we say height zero the element is going to contract the element is going to have zero height but the text should we'll be overflowing outside of that element so we want to hide that content when it overflows outside of its height and then we're going to say transition we're just going to transition the height 0.5 seconds ease and we're also going to transition the padding at 0.3 seconds and linear because why not let's just see what that does once we get to it so if we save that and check it out you can see now that we're starting to show that uh you know we're hiding the content and we're starting to get some base styles here so let's make it look a bit nicer um we're going to select the accordion and then the accordion content and the paragraphs within there we're just going to give the whole paragraph a padding of 20 pixels and zero margin very simple we don't need to review that style then we're going to select the accordion the accordion content and then target so what this means is when we click on this a with the target or the anchor whatever you want to call it let's call it target of tab one it's looking for this so this is the target element of this once we click here so we're going to style this when that action is performed is essentially what that's saying because if i were just to style this it's just going to style the content when i do this it's actually going to match it once it's been a target of that click and you'll see how that works we're going to say height 150 pixels so a hard-coded height so it's going to go to that height right now it's at zero accordion content is when we click that link and now it's we're basically activating this the selector the target it's going to actually make that height 150 pixels and because we have a transition on the height it's going to animate down let's just see if that works so there we go i'm clicking on coordinating one two and three and so really we just made the accordion it's done that functionality has is complete you can see how quite quite simple that was however i want to make this look nice and use a few more minutes just to make this a little bit more pretty so let's style the accordion and then the accordion trigger we're going to say text decoration none so that's the link we're going to remove that text decoration so it doesn't really look like a link we're going to select the accordion and then the accordion title position relative display block margin 0 padding 10 pixels font size 1m background color or background double 0 b3 b4 color white border solid one pixel three seven nine double a four let's see what that looks like so far so that's gonna be that whole title there we go so we've got that teal color in the background with a border but i want to make it look a little bit more three-dimensional in each of those elements so we're gonna do that with some box shadow so i'm gonna say box shadow zero one pixel zero rgba two five five two five five two five five and then zero point five and then inset so save that if i left it at that it would look a little bit like this so we've got that white highlight at the very top as if there's a light source shining down from the top angle but i also want more to it i want to give a um let me see here i want to have a border on the bottom and around it so there's actually going to be quite a bit more here so let's put a comma here you can add more box shadows within the same value within the same after the property you can add multiple values 0 negative 1 pixels 0 rgb a 255 255 255 and 0.1 and also inset so that will look a little bit like this well you can't even really see it let's just make it a hard-coded like yellow so you can see where that is so down here we're going to have another highlight down at the bottom so let's change it back to 255 and and if i made it a little bit more visible you'd see the white line at the bottom now we don't really like that i want it more subtle so maybe let's try something like i think 0.1 is good super super subtle just adds a little bit of depth to it a little bit of a of a highlight at the bottom remember the light source looks like it's coming from the top so i don't want to confuse your eyes and have multiple light sources i guess it doesn't matter it's up to you but now i'm going to say another comma zero four pixels zero and then three three eight eight nine four that's gonna be a shadow on the outside at the bottom of the title there so it's a thick darker line now the reason why we did this previous one this gentle highlight is to give a little bit of depth to that thick shadow on the bottom so it looks like it's a box coming out and you can see if i made that just a little bit lighter you could see that line there now that doesn't look as good so i kind of still like my original decision of 0.1 super subtle cool all right now the next one we're going to do one more box shadow zero four pixels two pixels rg ba zero zero zero zero point five and that was going to give us a shadow around the element altogether so each of them kind of just pop now we're going to do is when we hover there's more to it here so we're going to say accordion accordion double underscore title and then hover we're going to say background color is going to be oh bb fc0 that will look a little bit like this so it just highlights a little bit nice usability little feature there now we're gonna do one last thing just a couple more styles here i want an arrow at the far right hand side now instead of going to photoshop and creating one and then creating a retina version of it and all that sort of stuff we just want this done in css we want it done quickly and we're just going to use a convention that we've already used in past videos of using borders to create a triangle okay so let's say accordion and then accordion title after and now we're going to say position absolute of course it needs to be content empty string we're going to give it a let's see right of 20 pixels so in 20 pixels from the right the width is gonna be seven pixels height seven pixels so pretty small arrow border left two pixels a solid two pixels white border bottom solid two pixels white let's see what that looks like so far okay so we've just got the left side the left border and the bottom border of a square now as you can see all we need to do is just rotate it a little bit 45 degrees and then position it a little bit down in the center vertically we're just going to say transform and rotate and negative 45 degrees that will bring it counterclockwise that's right that's what we want save that there we go that looks amazing and now we need that to be down further so we're going to use the we're going to go top so up here in your right we're going to say top if i said 50 it's going to be too far because it's 50 from the top of the border which is actually like right up here so this whole thing is about this size so it's actually 50 from i think it looks like it's 50 from there yeah so 50 percent from there actually and we need it up probably about seven maybe let's try let's do this calc because we want fifty percent and a pixel value so let's try that minus seven pixels so it looks like it's too far up so i want to bring it down just a bit more so say five pixels that looks centered to me that's it there's our css3 accordion right there and now it should work just fine there's your css3 accordion uh like i said a lot of this was cosmetic we're just playing around with the styles but that's what css is for after all uh the functionality of displaying the content using that target selector was quite simple it's just a few lines of css and that's it to create a css3 accordion i hope this gave you some ideas for your own websites applications and so on and so forth thanks for joining me in day number 23 hang tight day number 24 is coming at you tomorrow bye nowwell hello everybody welcome back to css3 in 30 days today is day number 23 and we're going to be building a css3 accordion this is what i'm talking about over here an accordion is simply grouping of elements and content and typically uh how an accordion would work is that when you click on say a tab that content expands and if you click on a different tab that content expands and it contracts the other or retracts the other content now typically this would be built in jquery or javascript but the fun thing about this is that this is built exclusively in css3 now there is a little bit of a limitation here and perhaps i challenge you to find a way around it with exclusive css3 when you open an accordion item if i click on this item again it doesn't close it and that is because of the limitation of using css in this case perhaps that's not a big issue for you if you want to leave all of the content open at once perhaps there's a different work around but the way that we build it today it's quite simple and it will allow you to build an accordion very quickly in your own websites displaying content displaying services or whatever it is that you want to use for an accordion so let's jump in and get started over here in my code editor i have day number 23 css3 accordion opened up give yourself a moment to download those and open it up in your favorite code editor and then open up your index and sandbox.css of course as always final.css is available for your reference and let me show you the index.html first this is the markup in our sandbox here under the level 4 heading we have a div of the class of accordion and then a div with the class in within that of accordion double underscore item and then we have an a tag with an href that that navigates to an anchor tab one and then a class a couple classes in fact simply for styling and then we have a div with the idea of tab one and the class of accordion content and then there's two other identical setups just with tab two and tab three now what happens here is when we click this this link it navigates the browser down to this so it's an anchor and then it navigates it down to this div so this is looking for tab one the id of tab one it pops down to tab one and you can see that when you just click on the base mark up here so if i click on accordion one it pops to that content right there according to it pops to that content coordinating three pops to that content and that's the default functionality in the final version it doesn't do that we're going to be using that as a way to animate and display this content so that's how the markup is set up let's jump into our sandbox and get styling now a lot of this styling is going to be just i guess cosmetic the functionality of hiding and showing it is actually quite simple and you'll see that in a moment but we're going to make it look a little bit better because why not so let's style just accordion position relative display block background color we're going to make it white and then border solid 1 pixel and then to go e-o-e-o-e-o all right so now we're going to say accordion double underscore item display block and that means we're styling this entire item here so it's this whole piece so there's the accordion which wraps everything then there's accordion item which wraps the entire item within there and then there's more elements so we're going to display that block and we're going to say accordion and then accordion content and then we're gonna go display block padding zero height this is important zero we're hiding it and we're gonna say overflow hidden so we're hiding any of the overflow because there will be an overflow when we say height zero the element is going to contract the element is going to have zero height but the text should we'll be overflowing outside of that element so we want to hide that content when it overflows outside of its height and then we're going to say transition we're just going to transition the height 0.5 seconds ease and we're also going to transition the padding at 0.3 seconds and linear because why not let's just see what that does once we get to it so if we save that and check it out you can see now that we're starting to show that uh you know we're hiding the content and we're starting to get some base styles here so let's make it look a bit nicer um we're going to select the accordion and then the accordion content and the paragraphs within there we're just going to give the whole paragraph a padding of 20 pixels and zero margin very simple we don't need to review that style then we're going to select the accordion the accordion content and then target so what this means is when we click on this a with the target or the anchor whatever you want to call it let's call it target of tab one it's looking for this so this is the target element of this once we click here so we're going to style this when that action is performed is essentially what that's saying because if i were just to style this it's just going to style the content when i do this it's actually going to match it once it's been a target of that click and you'll see how that works we're going to say height 150 pixels so a hard-coded height so it's going to go to that height right now it's at zero accordion content is when we click that link and now it's we're basically activating this the selector the target it's going to actually make that height 150 pixels and because we have a transition on the height it's going to animate down let's just see if that works so there we go i'm clicking on coordinating one two and three and so really we just made the accordion it's done that functionality has is complete you can see how quite quite simple that was however i want to make this look nice and use a few more minutes just to make this a little bit more pretty so let's style the accordion and then the accordion trigger we're going to say text decoration none so that's the link we're going to remove that text decoration so it doesn't really look like a link we're going to select the accordion and then the accordion title position relative display block margin 0 padding 10 pixels font size 1m background color or background double 0 b3 b4 color white border solid one pixel three seven nine double a four let's see what that looks like so far so that's gonna be that whole title there we go so we've got that teal color in the background with a border but i want to make it look a little bit more three-dimensional in each of those elements so we're gonna do that with some box shadow so i'm gonna say box shadow zero one pixel zero rgba two five five two five five two five five and then zero point five and then inset so save that if i left it at that it would look a little bit like this so we've got that white highlight at the very top as if there's a light source shining down from the top angle but i also want more to it i want to give a um let me see here i want to have a border on the bottom and around it so there's actually going to be quite a bit more here so let's put a comma here you can add more box shadows within the same value within the same after the property you can add multiple values 0 negative 1 pixels 0 rgb a 255 255 255 and 0.1 and also inset so that will look a little bit like this well you can't even really see it let's just make it a hard-coded like yellow so you can see where that is so down here we're going to have another highlight down at the bottom so let's change it back to 255 and and if i made it a little bit more visible you'd see the white line at the bottom now we don't really like that i want it more subtle so maybe let's try something like i think 0.1 is good super super subtle just adds a little bit of depth to it a little bit of a of a highlight at the bottom remember the light source looks like it's coming from the top so i don't want to confuse your eyes and have multiple light sources i guess it doesn't matter it's up to you but now i'm going to say another comma zero four pixels zero and then three three eight eight nine four that's gonna be a shadow on the outside at the bottom of the title there so it's a thick darker line now the reason why we did this previous one this gentle highlight is to give a little bit of depth to that thick shadow on the bottom so it looks like it's a box coming out and you can see if i made that just a little bit lighter you could see that line there now that doesn't look as good so i kind of still like my original decision of 0.1 super subtle cool all right now the next one we're going to do one more box shadow zero four pixels two pixels rg ba zero zero zero zero point five and that was going to give us a shadow around the element altogether so each of them kind of just pop now we're going to do is when we hover there's more to it here so we're going to say accordion accordion double underscore title and then hover we're going to say background color is going to be oh bb fc0 that will look a little bit like this so it just highlights a little bit nice usability little feature there now we're gonna do one last thing just a couple more styles here i want an arrow at the far right hand side now instead of going to photoshop and creating one and then creating a retina version of it and all that sort of stuff we just want this done in css we want it done quickly and we're just going to use a convention that we've already used in past videos of using borders to create a triangle okay so let's say accordion and then accordion title after and now we're going to say position absolute of course it needs to be content empty string we're going to give it a let's see right of 20 pixels so in 20 pixels from the right the width is gonna be seven pixels height seven pixels so pretty small arrow border left two pixels a solid two pixels white border bottom solid two pixels white let's see what that looks like so far okay so we've just got the left side the left border and the bottom border of a square now as you can see all we need to do is just rotate it a little bit 45 degrees and then position it a little bit down in the center vertically we're just going to say transform and rotate and negative 45 degrees that will bring it counterclockwise that's right that's what we want save that there we go that looks amazing and now we need that to be down further so we're going to use the we're going to go top so up here in your right we're going to say top if i said 50 it's going to be too far because it's 50 from the top of the border which is actually like right up here so this whole thing is about this size so it's actually 50 from i think it looks like it's 50 from there yeah so 50 percent from there actually and we need it up probably about seven maybe let's try let's do this calc because we want fifty percent and a pixel value so let's try that minus seven pixels so it looks like it's too far up so i want to bring it down just a bit more so say five pixels that looks centered to me that's it there's our css3 accordion right there and now it should work just fine there's your css3 accordion uh like i said a lot of this was cosmetic we're just playing around with the styles but that's what css is for after all uh the functionality of displaying the content using that target selector was quite simple it's just a few lines of css and that's it to create a css3 accordion i hope this gave you some ideas for your own websites applications and so on and so forth thanks for joining me in day number 23 hang tight day number 24 is coming at you tomorrow bye now\n"