All language subtitles for 088 Building an Accordion Component - Part 1.en_US

Let's now finally go back to coding.

And so in this lecture,

and the next one,

we're going to build a beautiful accordion component.

And it's going to be based on this accordion example

that we saw in the last lecture.

So, we're going to build something very similar

which will look like this one on the right side.

So, let's go do that.

And as always,

when we start a new section,

we need our starter files.

So here in starter,

now we need folder number six.

And so actually,

this is only two images,

but well, we will need it.

All right.

So, folder number six.

Here let's create a new window

and another trick would actually to be simply dragging

this folder here onto that icon.

So you can do that,

so like this.

It will then open up a new window

already with that folder selected.

Or of course, you can also just create a new window

and then open the project folder from there.

So, like we have been doing up until this point.

So both way works.

And I actually prefer the first one that I showed you.

And so now let's start by creating an HTML file right here.

And we're going to create six components in this section

and so I'm not going to call them index.html,

but instead I'm calling this one 01-accordion,

like this,

dot HTML.

All right.

And since we are having so many files,

I will actually keep each of these components

here self contained inside of each HTML file.

So what that means,

is that I will not create an external CSS file

for each of them,

but instead we will simply use the style tag right here.

So, to create the HTML,

we have been always using it manually,

but now let's actually have VS code generated for us.

So exclamation mark, tab,

and there we go.

So now, the first thing is to change this to

accordion

component,

and then remember we can simply declare

or write the style tag in here,

so that will then create a style element

in which we can style our page.

All right.

Now, I will actually use a similar visual style

than the project that we created in the last section.

So therefore, what I'm going to do now

is to open the CSS file off that one

in order to copy some very simple styles.

So, let's go here to the open menu

and then on the desktop,

we have the previous section

and then actually I need the HTML as well,

so that I can grab this link here for the inter font.

So please go ahead and do the same thing now.

So copy this link element here,

which will include the inter typeface,

so font.

So that is done,

and now in the CSS,

we can get some of this stuff.

So our spacing system,

these colors, the universal selector, this reset,

so we don't have to write it all over again

because by now you already now how it works,

and then here this body element as well.

So let's take that,

and so with this we've saved ourselves some time.

This here we might actually not want-

actually let's leave it there.

And then here, I'm indenting just a little bit

to make it look better.

Let's get rid of some spaces

and off this comment as well,

and here actually we don't want that border in this body.

All right.

And now, let's create a simple div element here,

with the class of accordion.

And now I will just write something here,

let's say test.

Okay, and so now we have something.

Very basic setup.

So we have some very simple styles for the body,

and so let's test that by clicking here on go live.

So there we have our page with a live connection.

And for some reason that didn't work on your computer,

you can simply also open the HTML file directly.

All right?

But, so this did work.

And so let's start by actually defining a width

for this accordion element.

So our entire component will basically be this right here.

So let's select this element based on this class,

and I will give it a fixed width of 700 pixels,

and I also want to center it.

And remember for that,

we can use the trick of setting the left

and right margins to auto,

and the top and bottom to something else.

So let's say top and bottom 100 pixels,

and then again left and right,

we set them to auto.

And that will automatically center this element

inside of its parent.

So in this case, that is the body.

Just see that,

let's give it some background color.

And, well, any color works.

All right.

Nice.

All right.

Nice.

So let's actually turn that off again,

and now we can start filling up

our HTML here a little bit.

And for that,

let's actually take a look

at what we have here.

So basically the final result,

which is this.

So you see that basically

this accordion has three elements.

So this first one and the third one

are closed right now and,

and the opened one looks like this.

Now, of course we will not be able

to add the functionality here.

So when we click here somewhere,

of course, this box does not open.

So for that, we would need JavaScript.

But of course, that's not what we're gonna do here

in this section.

But anyway, to get started,

we will actually only build this element right here.

So basically, only the open state like this.

So here we have a number.

Then we have this title here,

so some kind of text.

Then this icon pointing downward,

and then here we have a box in there.

So this box here contains this text

and then this list.

And so basically, it is this box

with this content here that is hidden right here

and right here.

All right.

So, later we will then hide basically this content here

or actually here and here,

and we will leave it visible right here in this box.

Okay?

So, the plan is to now create these four elements.

So this number, this text, this icon,

and then a box with this paragraph

and this unordered list.

All right?

And then after that,

we will style them and only then in the end,

we will care about the layout.

So, the first thing is this number.

And I'm simply going to use

a generic paragraph element here

for all this text.

So that's zero two,

and of course it needs some kind of class as well.

So, number.

Then another p element with the class of text.

So, let me just copy what I have there.

So 'How long do I have to return my chair?'

All right.

Then we have that icon,

and for that let's actually use the hero icons again.

So heroicons.com, I think.

Okay, and now let's just search for that one.

Yeah, so it's the 'chevron-down'.

So copy SVG,

and let's paste that here

as the third child element.

Give it a save,

and while it's already here in our page,

let's give it a better class name.

Let's just say icon.

And then finally we need this hidden box here.

So let's actually call that a hidden box.

So since it is a box,

I will simply use the generic div element.

So this one doesn't need any semantic meaning,

and so our div is just fine.

So hidden box.

And inside of that,

there is some kind of paragraph and,

well, this one maybe doesn't need a class.

Let's just leave it like this.

And here we need some blind text.

So I'm not going to copy that text of course,

because remember that in VS code,

we can write lorem, like this,

and then that will generate a bunch

of blind text for us.

So just like this.

And let's see.

Yeah that looks kind of like the same amount of text.

But if it's too much,

we can just cut it a bit later.

And so now let's create that unordered list.

And remember, it is unordered

because these here are simple bullet points.

And so in there, each of them is a list item.

And now, let's here again use lorem.

I will now cut this part here

and put that into the next one.

So paste that here now.

And now, we'll do the same again

because that content of course is a bit too long.

Okay, and maybe

let's leave that.

And so your content is going

to look a little bit different than mine now,

but that's not really a problem

because this is always random.

Okay, so that looks good for now

as far as the HTML goes.

Oh actually we should wrap all of this content here

inside yet another one.

So right now inside of the accordion,

we have number text, and so on and so forth.

However, what we actually want in the accordion

is these three elements.

So these three items basically.

So this first, the second, and the third item,

of course, are individual elements.

So elements inside of the accordion.

But we right here have these elements as direct children,

and so that's not correct.

So let's simply create another div called an item.

But this we don't want here.

We want it at the very end.

All right.

So that's better.

And now let's style all of this.

And now it's time to use again

that trick that I showed you before.

So remember for that,

we just select something.

Then we can hit option or alt on our keyboard,

and then if I double click here again,

it will select the next class.

And so like this,

we don't have to copy paste them multiple times.

We can just do it all at once.

So again, I'm now hitting the option or alt key,

double click on this class,

then on this class,

and finally this one here.

All right.

Now I copy it,

and here inside of my style,

I can now paste that

and so now I can do this here a lot easier.

Okay, so almost done.

Because this is always like,

a lot of work selecting all of these elements

in the very beginning.

But now we're done with that,

and so let's style them one by one.

And I'm gonna start basically with the visual styles.

So of the number, the text, and this icon here.

And let's start with the icon actually

because it is taking up a lot of space.

So let's make it really small.

So remember that these icons were designed for 24 pixels,

and so I'm actually respecting that size.

And now the color, remember,

we can manipulate it using the stroke property.

And we have our color of value up here.

Okay.

And that looks a lot better already.

Okay, let's take a look at our original here.

And so, next up let's style the number and the text.

And let's use the font size of 24 pixels here.

So number, font size, 24 pixels,

and let's also make it a bit bolder

because this is an important piece of content

and so we make it bold in order

to give it some more emphasis.

Oh and also the text color,

let's make it green at this point

even though a bit later,

we will actually make this in a different way.

So let's copy this, or actually,

if it's exactly the same style as the text here,

let us put the selector here

as the second one in this list.

So remember, as we learned way back,

we can basically create a list of selectors.

And so now this declaration block here

will apply to this one and to this one, right?

Give it a save.

Now we cannot see it,

but there you go.

Great.

Now next up, let's style this text here

and this unordered list.

All right.

And I didn't give them a class,

so let's just say hidden box,

and then select the p as the child there.

And here all I want to do

is to improve the line height

and set it to 1.6,

and also give it some margin to the bottom.

So let's say 24 pixels.

Okay, so that looks better.

And now finally also, the u-l.

Okay.

So we want to set a lighter text here on this.

And so, in order to do that,

we don't have to select each of them,

but instead we can simply set that color on the parent

and then that will move down,

and so that will then be inherited.

Now about that lighter color,

this one here,

let me actually get that from the open color again.

Open colors.

So that is this one.

And let's use this one here, let's say.

All right.

Wow that's a little bit too much on the light side.

So let's go with this one.

Yeah, that looks better.

Maybe it is not really the best choice here

in terms of accessibility,

but, well let's just leave it as this for now.

We're gonna worry about that in some other project.

So in the next section actually.

Now here we need to then

also set some margin on the left.

So, basically in order to align this a little bit,

so the bullet points with the p,

with the paragraph.

So margin left,

and now 16 pixels.

That might work.

That looks aligned.

Well maybe it needs to be a little bit more.

Yep, that's correct.

So here we broke a little bit of our system,

but in this case it was necessary

because only with that value,

it's not perfectly aligned.

And actually not yet, I think.

Now it's perfect.

All right, now next we want

to create some space here between these items.

And so, now it's time that I will finally show you

something new in CSS and,

in particular, in flexbox.

Now you might be wondering,

'why is he going to use flexbox?'

I mean, we don't really want

these elements side by side, right?

And that is totally correct.

However, we can still use flexbox

by doing something new,

which I hinted at when we first learned flexbox,

but we never did it.

So let me start by explaining why I would use flexbox

for something like this,

and then also how.

So, in order to create this space

between these elements here,

I would now have to select all of them

and then add a margin to the bottom

to all of them except for the last one.

So again, I would have to select them now.

I can actually do that very quickly.

Margin bottom of 12 pixels.

Like this.

And then I would also have to select the last one

and set it back to zero, right?

However, we can have all of this

in a much easier way,

which is by using flexbox

and then setting the gap property.

However, that gap is usually horizontally.

And also, if we set something to flexbox,

it will put the element side by side, right?

However, there is a really nice and very important trick,

which is that we can set the flex direction

of the container to column.

So let's remove all of this here.

All right.

And then, right here let's set this

to a flex container.

So display flex.

And so by default again,

the elements will be set side by side like this, right?

But as I mentioned,

we can now say flex direction,

and set it to column.

So by default, it is row.

And now, if we set column,

it will simply look exactly like before, all right?

However, if we now define the gap property,

so gap let's say 12 pixels,

then see what happens.

So you see that now the gap property

basically was applied vertically.

So between these elements like this,

and no longer horizontally, right?

So that is the power of flex direction

and let's actually take a look

at a graphical explanation to make really sure

that you understand this very important concept.

Now here as an example,

I'm actually using the accordion element but,

of course, that's not important.

The principle is exactly the same.

So anyway, right here we can see

what flexbox is by default.

So the main axis is basically horizontally,

and the elements are side by side right now

because we have display set to flex,

and we also have some gap there of 24 pixels.

And so that's why there is some space horizontally

between the items.

However, if we now set flex direction to column,

then watch what happens.

So you see,

that now basically the elements

are stacked one after the other

because the main axis rotated by 90 degree.

And so now,

the main axis no longer goes from left to right,

but from top to bottom.

Or in other words,

the main axis is now vertically

and no longer horizontally.

On the other hand,

the cross axis which used to be vertically,

is now horizontally.

And so now, everything is different.

Everything in flexbox

has now turned by 90 degrees, basically.

So what this means is that now,

align items no longer aligns the items vertically,

but horizontally.

And in the same sense,

justify content now no longer aligns the items horizontally,

but vertically.

And finally of course,

as we already saw in practice,

the gap property now acts like margin bottom

and no longer like margin right, okay?

So this is really important for you to understand

as this feature is actually one of the main features

of flexbox.

It gives flexbox even more power

than we already thought that it had, all right?

So I hope that this made sense,

and so let's now go back to our code.

And to see this explanation basically again,

let's inspect that here.

So, right here,

we now see that gap there between the elements, right?

And we can even turn this on,

and then it stays permanently just like in CSS script,

and of course,

if we took out the flex direction to column,

then they would be side by side

and this space here would be horizontally, right?

Now let's also just try to use align items here

because as you saw, this now should work differently.

So remember that usually align items

would align our flex items vertically, right?

But what do you expect will happen now

as we center them?

Well you see,

now they got aligned horizontally.

So again, if we turned flex direction off here,

then you see that the alignment will be vertically, right?

So this one is taller

and these are a bit smaller

and we see that they are vertically aligned.

But by turning this on,

then everything rotates 90 degrees basically,

and now the alignment is horizontally.

So you see,

that all of them here are like basically centered.

So along the cross axis,

which now is going from left to right.

So here where I'm moving my mouse, right?

So now of course we don't want

that here in this example,

but this was just to demonstrate

how the cross and the main axis did actually rotate.

And actually I think this is too much space,

and that is because I did not reset the line height.

So, many times what I do,

is to set the line height here on the body to one,

and so basically resetting it.

So, since this is about text,

this property it will get inherited,

and so we can put it in the body.

And so now the space that we had,

or some of it is gone,

and it looks better like this.

All right,

so we have some decent visual styling going on here,

and so for now in this lecture,

that's it.

And so, in the next one,

we will take care of finally building the layout

and then also add the two other elements

to our accordion.

So take a small break,

and then I'll see you back here.