Name: Accordion: CSS Tutorial (Day 23 of CSS3 in 30 Days)
Uploaded: 2020-03-30T04:56:49.000Z
Duration: 14 min 52 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Future continuous

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

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.

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.

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.

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.

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

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.

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.

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 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.

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.

Accordion content is when we click that link, and now it's We're basically activating this selector.

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.

So every day I'm clicking on courting 12 and three.

And so really, we just made the accordion.

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 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.

Font size one m background color or background.

Subtitles ListPlay Video

Accordion: CSS Tutorial (Day 23 of CSS3 in 30 Days)

subtle

content

multiple

negative