Preview
Video Player
00:00
00:00
Create an Accordion Menu with CSS
8:51Learn to create a content accordion menu using CSS. Content accordions are great for when space is limited and you have a lot of content that you want to present in a cleaner fashion.
[SOUND] Hi everybody.
0:00
I'm Dave Conner, a designer and
front-end developer.
0:05
In this treehouse workshop,
0:08
we are going to learn how to create
a content accordion using HTML and CSS.
0:10
Content accordions are great
when space is limited and
0:14
you have a lot that you wanna
present in a cleaner fashion.
0:17
For instance, if you had a bunch
of questions in the FAQ page.
0:20
By hiding the answers in a constant
accordion, more questions would be visible
0:23
on the screen at one time,
allowing them to be more easily scanned.
0:26
This is just one of many use cases for
accordions.
0:30
They've been around for a while,
and they are very popular.
0:33
Most solutions use Java Script
to handle toggles, but
0:36
we will be sticking with HTML and CSS.
0:38
The technique that we're about to
learn employs radio input elements and
0:41
their check pseudo class along
with some sibling selectors.
0:44
So let's get started, and
see how this is done.
0:47
Let's take a look at
what we will be building.
0:50
We have a nice looking accordion here.
0:52
When you click on one of the tabs,
we get a smooth slide toggle animation.
0:54
Click on another one, the last one closes,
and the new one slides open.
0:59
Let's begin with the mark-up.
1:04
We will be starting off with index.html.
1:05
You can see it's just a blank page so far.
1:07
We will first add a div for
our accordion wrapper.
1:10
We will give it a class of tab-group.
1:15
Inside our tab-group, we will create
the first tab of the accordion.
1:18
So we will write another div and
give that a class of tab.
1:24
Now, each tab will get one radio input and
one label.
1:30
The label will be both the label for
our input, which will be hidden, and for
1:33
the tab of the accordion.
1:38
Let's create an input and
give it an id of tab one.
1:39
The type is radio and the name is tabs.
1:46
This is part of the tabs radio group.
1:53
After that we will write our label.
1:57
We'll set the four attribute to tab
one to tie it to the radio input and
1:59
we will write our text
which will be label one.
2:03
Next we want to add the wrapper for
our content.
2:09
We will use a div and
give it a class of tab-content.
2:12
Inside can be any element that you want
to display, text, images, you name it.
2:22
We will just add some text.
2:27
I'm going to pay some so
we have something to see.
2:28
And that's it.
2:33
Our tabs have three main components.
2:34
We have our input, our label,
and our content container here.
2:35
I'm going to copy our first tab and
paste it a few more times [SOUND].
2:42
Then go ahead and change our id and
four attributes on our inputs and labels.
2:48
These all must be unique so
we will do tab two,
2:53
[SOUND] [SOUND] and label two.
2:58
[SOUND] Then tab three,
3:01
[SOUND] label three.
3:06
And finally, tab four.
3:11
So now we have four tabs in our accordion.
3:19
We will save this, and
that's it for the markup.
3:21
If we needed to add another tab we would
just add another one of these divs
3:25
with a class of tab and its children.
3:29
Pretty straight forward.
3:32
If you look at this in your browser you
will see it's not quite an accordion yet.
3:33
We need to add our styles but
you can see all our elements for each tab.
3:36
So we have two style
sheets linked in our head,
3:42
style.css is just some boiler plate
code for the demo, nothing too fancy.
3:46
The other style sheet accordion.css is
where we will be writing our styles.
3:50
Opening it up,
we will begin with our tab-group wrapper.
3:55
We are going to center it so
we will add margin zero auto.
4:01
We will give it a width of 100% and
a max width of 40ems.
4:07
So, our accordion will be full
screen on smaller devices,
4:15
then center itself on the page
when we get above 640 pixels.
4:19
For our individual tabs, we want them
to be one 100% of it's wrapper, and
4:23
any positioning we do, we want it to
be relative to the tabs themselves.
4:27
So we will position it relative, and
set the width to one hundred percent.
4:31
Our radio inputs are going to be hidden,
so we will position them absolutely.
4:41
[SOUND] Then set them
to the top left corner,
4:46
and use zee index to push them way
to the back and out of the way.
4:51
We will be using an input label
to toggle the radio button, so
5:05
when we click on the label, it will
reveal its adjacent accordion content.
5:08
I will use the hex value to set
the background to a nice teal color.
5:16
We will set the color to white so it has a
nice contrast with this darker background.
5:23
We want the label to span the entire tab,
so let's make it display block.
5:32
Then set font weight to bold and
line height to three.
5:39
This line height will give
us more of a clickable area.
5:46
Next, we wanna add some padding,
to get it off the left corner and
5:49
give it a bottom margin, so
we have a little space between tabs.
5:52
And lastly, we are going to add
a transition on our letter spacing Just so
6:00
it draws the eye when we focus or
hover the label.
6:03
Now we will add our focus and
hover styles.
6:13
So when the input is focused or
the label is hovered,
6:24
we will lighten the background and
change the letter spacing.
6:26
Again, just to draw the eye to it.
6:39
Next is our tab content.
6:41
We will be hiding our content divs
by setting a max height of zero and
6:47
overflow of hidden.
6:50
Then we will add a transition so
when our tab is chosen,the content expands
6:55
with a nice slide transition
instead of a jerky opening.
6:59
[SOUND].
7:02
[SOUND] Next, we will add some margin for
our paragraph and our tab content div.
7:05
Now all we have left is to write our
styles that will open our tabs when
7:17
our radio inputs are selected.
7:20
For this we will be using
the check pseudo class.
7:22
So, for our selector,
we are going to write tab Input checked.
7:25
We will then use a general sibling
combinator and then the tab content class.
7:32
So we are targeting
the class of tab content,
7:42
which is next to an input that is
checked inside the class of tab.
7:45
And for this we are just going to
increase the max height to 6.25em.
7:50
Unfortunately we cannot transition
a height from 0 to 100%.
7:57
We are getting around that by
transitioning the max height.
8:01
So we set this value to the height
of our largest accordion tab.
8:05
That way we are only opening our
tab as far as the content needs but
8:09
still allowing for differences in height.
8:12
That's it for our styles.
8:15
We will save this and
go back to our browser.
8:16
Hit refresh, and there you go.
8:19
We have a working content accordion.
8:21
So, there you have it.
8:28
With just a small amount of HTML and CSS,
we have a fully functional accordion menu.
8:30
The radio inputs are a great
alternative to Java Script,
8:34
because they bring in the tab and
arrow key controls with them by default.
8:37
There are a ton of things that we can
do to improve on this design, and
8:40
I would love to see what
you guys can come up with.
8:43
Well that's it for this workshop.
8:46
I'm Dave Connor and
I'll see you next time.
8:48
Thanks for watching.
8:49