Welcome back to CSS three in 30 days.

Today is day number 23 we're going to be building a CSS three accordion.

This is what I'm talking about.

Over here an accordion is simply grouping of elements and content.

And typically how an accordion would work is that when you click on, say, a tab that content expands.

And if you clicked on a different tab, that content and expands and it contracts the other or retracts the other content Now, typically, this would be built in J query or JavaScript.

But the fun thing about this is that this is built exclusively in CSS three.

Now there is a little bit of a limitation here, and perhaps I challenge you to find a way around it with exclusive CSS three.

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 on 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 service's or whatever it is that you want to use for an accordion.

So let's jump in and get started.

Over here on my code editor, I have day number 23 CSS three 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 at CSS, of course, is always final.

Nazi SS is available for your reference and let me show you the index dot html First, this is the mark up in our sandbox.

Here under the level four heading, we have a divide, 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 a new H ref.

Ah, that that ah 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 set ups just with tab too.

And tap 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 def.

So this is looking for Tab one.

The idea of Tab one.

It pops down to tap one, and you can see that when you just click on the base mark up here.

So I click on according one pops to that content right there.

According to it pops that content, according three pops of that content.

And that's the default functionality in the final version.

It doesn't do that.

We're gonna be using that as, ah, way to enemy and display this content.

So that's how the markup is set up.

Let's jump into her sandbox and get styling.

Now, a lot of this styling is going to be just, I guess, cause medic the functionality of hiding and showing it is actually quite simple.

And you'll see that in a moment.

But we're gonna make it look a little bit better, because why not?

So let's style just accordion position, relative display, block background color.

We're gonna make it white and then border solid one pick soul into Oh ee oh ee oh ee Oh!

All right, so now we're gonna 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 according or drops everything.

Then there's accordion item which wraps the entire item within there.

And then there's more elements.

We're gonna display that block, we're gonna say accordion and then, ah, Cordy in content.

And then we're gonna go display block padding.

Zero height.

This is important.

Zero were 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 elements gonna contract the elements.

Gonna have zero height, but the text should will be overflowing outside of that element.

So we want to hide that content when it overflows outside of its height, and then we're gonna say transition.

We're just gonna transition the height 0.5 seconds ease.

And we're also gonna transition the padding 0.3 seconds and linear, because why not?

Let's just see what that does Once we get to it.

So if we say that and check it out, you can see now that we're starting to show that Ah, you know what?

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 gonna give the whole paragraph padding of 20 pixels and zero margin.

Very simple.

We don't need to review that style.

They were gonna select the accordion, the accordion content, and then target.

So what this means is, when we click on this A with the targets are the anchor.

Whatever you wanna call it, let's call it target of Tab One is 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 the style, this is just gonna stall 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 gonna see height, 150 pixels, so hard coded height.

So it's going to do 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 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 every day I'm clicking on courting 12 and three.

And so really, we just made the accordion.

It's done.

That functionality is complete.

You could say I was 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 gonna say text decoration?

None.

So that's the link.

We're gonna remove that text decoration so it doesn't really look like a link.

We're gonna select the accordion and then the accordion title position.

Relative display Block margin.

Zero patting 10 pixels.

Font size one m background color or background.

Double zero B three before color.

White border solid one pixel 37 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 got that teal color in the background with the border.

But I wanna make it look a little bit more three dimensional in each of those elements.

So we're going to do that with some box shadow, so I'm gonna say box shadow 01 pixel zero RGB, eh?

255255255 And then 0.5 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 gonna 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 scene.

After the property, you can have multiple values zero negative one pixels.

Zero R G b A 2 55 to 55 to 55 0.1 and also in set.

So that will look a little bit like this.

Well, you can't even really see it.

Let's just make it.

Ah, hard coded like yellow so you can see where that ISS So down here we're going to have another highlight down to the bottom.

So let's change back to 2 55 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 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, annoying to say another comma.

Zero for pixel zero and then 338 89 4 That's gonna be a shadow on the outside at the bottom of the title there.

So it's a thick, darker line.

And now the reason why we did this previous one.

This gentle highlight is to give a little bit of death to that thick shadow on the bottom.

So it looks like it's a box coming out and you can see from me That's a little bit lighter.

You could see that line there.

Now, if that doesn't look as good, so kind of still like my original decision of 0.1 Super subtle Cool.

All right, now, the next one, we're gonna do one more box.

Shadow 04 pixels to pixels are G B A 0.5.

And that was going to give us a shadow around the element altogether.

So each of them kind of just pop Now we're gonna do is when we hover.

There's more to it here.

So we're gonna say, accordion, accordion, double underscore title and then hover.

We're gonna say background color is gonna be o B B f c zero that will look a little bit like this.

So 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 photo shop and creating one and then creating a retina version of it and all that sort of stuff, we just want to stand 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 gonna say position absolute.

Of course, he needs to be content.

Empty string.

We're going to give it A C writes of 20 pixels.

So in 20 pictures from the right, the width is gonna be seven pixels.

Height, seven pixel.

So pretty small arrow border left, two pixels on solid two pixels.

White border bottom, solid two pixels.

Wait.

Let's see what that looks like so far.

Okay, so we just got the left side, the left border in the bottom border of a square.

Now, as you could see, all we need to do is just rotate it a little bit 45 degrees and then position in a little bit down in the centre 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 you go, Daleks.

Amazing.

And now we need that to be down further.

So we're gonna use the we're gonna go top.

So up here, in your rights, we're gonna 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 think.

It looks like it's 30% from there.

Yes, so?

So you were sent from there, actually, and we need it up.

Probably about seven, maybe.

Let's try.

Let's do this couch because you want 50% 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 CSS three accordion right there.

And now it should work just fine.

There's the CSS three accordion.

Like I said, a lot of this was caused.

Medic were just playing around with styles, but that's what CSS is.

Four.

After all, the functionality of displaying the content using that target ah selector was quite simple.

Just a few lines of CSS and that's it to create a CSS three accordion.

I hope this give you some ideas for your own websites, applications and so on and so forth.

Thanks for joining me in Day number 23 Tight day number 24 is coming at you tomorrow by now.