Instructor: 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 white space 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,
the third value actually,
is the blur.
Then the fourth value,
I usually simply ignore it
and go straight to the rgba.
So black, which we know is 0 in everything.
And then the alpha, let's set it to 0.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 we 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 our spacing system.
But I'm not going up and down all the time
to test these values.
So I already experimented with that before.
So 24px 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 our 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 of 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,
showed very simply occupy all the remaining space.
And so remember that for that,
we can use our fr unit.
So, 1fr.
And with this,
actually our layout should basically be
almost finished already.
Okay, and that looks almost correct.
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,
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 this is 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 2.
So, that's because of these grid lines here.
So grid line 1 and 2.
And so now it will start here in grid line number 2.
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 24px.
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.
Let's say 32px, now 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 "laborum," or whatever that is.
And here, maybe, that last word as well.
Nice.
Now, 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 1,
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.
And the 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 book like this,
which would 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 let's 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 had 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 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 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 these 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 the 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 4px 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 the open class, right?
And so here we can set the display 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 the 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 the class of text
that is a children of an element
with the class of open.
And, there we go.
So that works.
And of course we cannot 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 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 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 build our next component,
which is again gonna be really exciting.
And so I can't wait to see you there.