All language subtitles for 089 Building an Accordion Component - Part 2.en_US

So now it's time to actually build the layout

of our accordion.

And so basically what we want to do

is to style this item element here,

so all of this to have some nice layout.

So it's this one here, right?

Basically because each of the items of the accordion

are called like this, so item.

Let's see what we have here,

and so first of all,

there is like a shadow around that item,

and then there is of course also some whitespace

inside of it, so some padding.

And finally, there is this green line on top,

but we will take care of that later.

So that will make a bit more sense once we get there.

But now about the item, actually,

so let's start with the box shadow here.

So the first value remember is the horizontal offset,

the second is vertical offset,

and I'm simply setting both to zero here,

and I'm doing it like this

because basically I tried to replicate the accordion

that I showed you in the last lecture,

okay?

Then the second one or the third value actually

is a blur,

then the fourth value I usually simply ignore it

and go straight to the rgba.

So black, which we know is zero in everything,

and then the alpha, let's set it 2.1,

and give it a save,

and there we go.

So a nice shadow here, basically around the entire element,

and that's because here we didn't specify anything.

If he put it here like this,

then that whole shadow would move down, right?

But again, I was just trying to basically copy

that other design that this one is based on.

Now let's add some padding here,

and as always, I'm using old spacing system,

but I'm not going up and down all the time

to test these values,

so I've already experimented with that before.

So 24 pixels here,

and now it's time to think about the layout.

So let's quickly go back,

so what do we have here?

We basically have these four elements again,

and as we can see,

they are kind of in a two dimensional grid, right?

So we have some here in this first line

and then this box here is in the second line.

So what that means is that we should probably use

CSS Grid for this, right?

So one column right here, second column and third column,

okay?

So let's do that.

So display grid, remember?

And then we need to define all columns,

and remember that for that, we use the grid template

columns property.

And now here, we simply need to define the width

of all our three columns.

So what numbers do you think I should use

for the three columns?

Can you think about that for a little bit?

Well, the first one should simply be the width

of the content, right?

So if the content is 02, then that should be the width,

but if it was like 027,

then the column should be wider.

And so what that means is that we want the column

to basically have an automatic width,

so based on the content.

Then the same is true for the last one here,

so let's write that immediately.

And then finally, the second column, the one in the middle

should very simply occupy all the remaining space.

And so remember that for that,

we can use auto fr unit,

so 1fr.

And with this, actually our layout

should basically be almost finished already.

Okay, and that looks almost correct, all right?

So we do have three columns.

However, that first column is way wider than we thought

it should be.

And the reason for that, and let's inspect this here,

is that of course, this fourth element,

so the hidden box of course goes here into the second row

into the very first column, right?

So that's only natural because that is the automatic

placement of the grid items inside of the grid.

However, we do not want this element here, right?

Instead, we want it nicely aligned with the title.

And so there's this actually one of the huge advantages

of using CSS Grid here in the first place,

because by now placing this box inside of this cell,

that will very easily align this content with this title,

right?

So let's define that here in our hidden box.

And do you remember how that works?

Well, we can simply say grid column,

and then we say that we wanted in column number two.

So that's because of these grid lines here,

so grid line one and two.

And so now it will start here in grid line number two.

So with a nice save, now it looks correct.

Great.

Now all we have to fix is of course the spacing here,

but besides that, it is actually almost done already.

So let's give it a column gap

of, let's say 24 pixels,

okay?

And I'm using different gaps

because I want there to be a lot more gap in the row

or at least some more,

so let's say 32 pixels, okay?

Beautiful.

So now it does look almost like this one here.

Now just one thing is that we should align

all of these elements here, like vertically,

because right now I think it's not.

So this one looks off a little bit,

but that is quite easy.

So we want to align the grid items themselves

inside of the cells,

and so for that, we need one of the align properties.

And so since it's vertically, it is align items,

set to center and let's see if something changes here.

Well, not really, I think,

but, well, anyway, it's still good to have this here

like this.

Now the content is also a bit too long,

so let's cut some of it out

like this last sentence here maybe,

then,

let's cut these two words,

then here let's start or stop after a lamborum

or whatever that is, and to here maybe

that last word as well.

Nice.

Okay.

And so now it's time to actually copy our code,

and in order to add this one and this one here.

So number one and number three.

And so here in VS Code, we can do another nice trick,

which is on this element here,

we can click on the right side here on this small icon,

and that will then collapse this completely.

So you see now it goes from line number one

immediately to 125.

So basically all the content was hidden

because now we can copy this very easily

without having to scroll up and down.

So we can just paste that here,

so of course that is then open and I can paste it here.

So this is supposed to be the number one,

enter text,

where are these chairs assembled?

And,

oh, actually that was wrong.

Or actually it wasn't,

I simply forgot that this one was still collapsed,

number two.

So this is 03, which is,

do you ship to countries outside the EU?

Okay.

So that looks quite nice,

but still not where we want it to be.

And so now it's time, well,

first to fix this spacing here,

and where is that defined?

Let's go back right here.

Or actually whenever we have a bug like this,

we just simply go ahead and inspect it.

And I can immediately see the mistake that I made,

which was to copy the entire accordion

and not simply the item.

So that was a stupid mistake,

but that happens.

So that's called delete this accordion

and this closing tag from the previous one.

Okay.

And here the same thing,

and now that should be fixed.

So now they're actually glued to one another,

so we need to fix that as well.

And so now I will actually use that trick again,

where I set the flex direction to column.

So right here in the accordion, let's do that,

because otherwise, I would have to now go into here

and set a margin bottom to each of them

and select the last one and take it away.

But once again, I find that it's much easier

to define these properties for example,

related to a spacing right in the container element.

So display flex,

which again, by default,

will put them side by side in this weird way,

but then, we can easily say flex direction

and set it to column, okay?

Beautiful.

So now we are where we started,

and so now it's time to add that gap,

which remember, will now be set vertically.

And so that is actually the whole point

of using flex direction set to column in this case.

And so, nice.

That's really cool.

But now we actually want to basically hide this,

hidden box here and this one in element number one

and three.

So how are we going to do that?

Well, we will use a very common trick

that we use in CSS all the time,

especially when we create these components

that will at some point

have to work together with JavaScript.

So basically we will by default

set these three elements here to the default closed state,

so to this one,

where this text is gray and this is black,

and there is also a no border at the top,

and of course the content is hidden.

And then, we will add a special class

to this item right here,

in this case, the item number two,

which will then make it so that all the styles

will be put back,

so the green text and the border, all right?

so that probably sounds more complicated

than it actually is.

So let's see how it works.

So by default, remember,

we will make the hidden box actually hidden.

And for that, there are many, many ways

in which we can hide elements in CSS,

but more about that later,

because for now we will just use the easiest way,

which is display none,

like this, all right?

And so now they're all gone,

then I want this text here also to be gone,

so back to default,

and also this number here should actually have

a light gray color,

so let me select that separately.

And then let's once again,

get that color actually here from open color,

and now let's use this one.

So this color will probably not really be accessible,

but that's also a rule that sometimes we can break.

So this number is not absolutely essential here

for the user to understand this content,

and so I think we are fine like this, okay?

All right.

So this is the default state basically.

And so now, as I was saying,

what we will do is to basically add a class to the element

that we want to be open,

so the one that we want to look as if it was open.

And so that is the second one, so this one right here.

So let's add a class of open, okay?

And so now we can create some styles

for the number and text that are inside of the element

that is the open element, right?

So that sounds probably confusing, but we can do it.

So I will select the open element now,

and the first thing that I'm going to do

is to add that border,

because that will be basically the easiest change

that we want.

So let's say four pixel solid

and now our green color,

all right?

And so now the open box already has the green border.

So just like this, right?

But now let's also make this text green,

and let's display that hidden box.

So how can we do that?

Well, we can do this,

we say that basically the hidden box,

that is a child element of the element

that has to open class, right?

And so here we can set the display a property back to block.

So why does that work again?

Well, in here we have,

of course the element with the class of hidden box, right?

And if this element, so the parent element of the hidden box

has this class of open, right?

So if open is present here on the parent element,

then this selector here will apply,

right?

Because if this doesn't exist,

so if open is not present on the parent element,

then of course nothing's going to happen,

because this selector here will not be applied anywhere.

But if the open class is present,

then this descendant selector here

will of course, then work.

And so that's why this is back now.

To make it even clearer,

let's see in the inspector.

So,

now here we are.

So here we have that style of open,

which is the parent of hidden box and the selector,

but if we were to remove the open class

here from the parent element,

then hit enter.

Now that's gone.

And so now, also that rule is gone from the hidden box.

So the one that we had here before,

so this one is now gone because the class is also gone,

the open class.

And so therefore, this can no longer work, all right?

So I hope that made sense,

because this is actually,

well, as I said before, something that is used all the time.

Okay.

So now it is the same idea as before,

so whenever there is a number element,

so an element with the class of number

that is a child element of an element

with the class of open,

then color should be green.

Well, which one is it?

Yes.

And we want this to happen also to the text,

and so we can of course create a list here.

So we need to write the same thing again.

So open, which is the parent of text,

and so again, this one will apply

if there is an element with a class of text

that is a children of an element with a class of open.

And, there we go.

So that works.

And of course we can now try to add that class

also to another item,

so to this one,

and now that should look just the same,

and it does.

Beautiful!

But let's take that back because we only want it

in this situation, in the second one.

And so with this, we actually finished this small project,

so this small component.

So I hope that this was fun,

and here are the main takeaways that I want you to take

from this project,

is first of all, this logic that we did here,

so basically, this open state that we created

simply by adding this class here

to the parent element, right?

Then I want you to take away this whole idea

of setting a flex container to flex direction column,

which remember, will essentially switch the main

with the cross axis.

And then another takeaway

was how we built this layout here actually.

So I think that this was another great use case

of a CSS grid and another showcase of its power, right?

So make sure to study the code that we did here,

and then after that,

we can together actually built our next component,

which is again, gonna be really exciting,

and so I can't wait to see you there.