well hello everybody welcome back to
css3 in 30 days today is day number 23
and we're going to be building a css3
accordion this is what i'm talking about
over here an accordion is simply
grouping of elements and content and
typically uh how an accordion would work
is that when you click on say a tab
that content expands
and if you click on a different tab
that content expands and it contracts
the other or retracts the other content
now typically this would be built in
jquery or javascript but the fun thing
about this is that this is built
exclusively in css3 now there is a
little bit of a limitation here and
perhaps i challenge you to find a way
around it with exclusive css3
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
not 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 services or whatever it is
that you want to use for an accordion so
let's jump in and get started over here
in my code editor i have day number 23
css3 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.css
of course as always final.css is
available for your reference
and let me show you the
index.html first this is the markup in
our sandbox here
under the level 4 heading we have a div
of 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 an href
that that 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 setups just with tab two and
tab three 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 div so this is looking for
tab one the id of tab one it pops down
to tab one and you can see that when you
just click on the base
mark up here so if i click on accordion
one it pops to that content right there
according to it pops to that content
coordinating three pops to that content
and that's the default functionality in
the final version it doesn't do that
we're going to be using that
as a way to
animate and display this content so
that's how the markup is set up let's
jump into our sandbox and get styling
now a lot of this styling is going to be
just
i guess cosmetic the functionality of
hiding and showing it is actually quite
simple and you'll see that in a moment
but we're going to make it look a little
bit better because why not so let's
style just accordion
position relative display block
background color we're going to make it
white
and then border
solid 1 pixel and then to go e-o-e-o-e-o
all right so now we're going to 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 accordion which
wraps everything then there's accordion
item which wraps the entire item within
there and then there's more elements
so we're going to display that block and
we're going to say accordion
and then accordion
content
and then we're gonna go display block
padding zero
height this is important zero we're
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
element is going to contract the element
is going to have zero height but the
text should
we'll be overflowing outside of that
element so we want to hide that content
when it overflows outside of its height
and then we're going to say transition
we're just going to transition the
height
0.5 seconds
ease and we're also going to transition
the padding
at 0.3 seconds and linear
because why not let's just see what that
does once we get to it
so if we save that and check it out you
can see now that we're starting to
show that uh you know 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 going to give the whole paragraph
a padding of 20 pixels and zero margin
very simple we don't need to review that
style then we're going to select the
accordion
the accordion content
and then
target so what this means
is when we click on this a
with the
target or the anchor
whatever you want to call it let's call
it target of tab one it's 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 to
style this it's just going to style 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 going to say height 150 pixels so
a hard-coded height so it's going to
go to that height right now it's at zero
accordion content is when we click that
link and now it's we're basically
activating this the selector the target
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 let's just see if that
works
so there we go i'm clicking on
coordinating one two and three
and so really we just made the accordion
it's done that functionality has is
complete you can see how quite quite
simple 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 going to say text decoration none
so that's the link we're going to remove
that text decoration so it doesn't
really look like a link
we're going to select the accordion and
then the accordion
title
position relative
display block
margin 0 padding 10 pixels
font size 1m
background color or background
double 0
b3 b4
color
white
border solid one pixel
three seven
nine double a four
let's see what that looks like so far so
that's gonna be that whole title there
we go so we've got that teal color in
the background with a border but i want
to make it look a little bit more
three-dimensional
in each of those elements so we're gonna
do that with some box shadow so i'm
gonna say box shadow
zero one pixel zero
rgba
two five five two five five two five
five
and then zero point five and then inset
so save that if i left it at that it
would look a little bit like this so
we've got that white
highlight at the very top as if there's
a light source shining down from the top
angle but i also want more to it i want
to
give a
um
let me see here
i want to have a border on the bottom
and
around it so there's actually going to
be quite a bit more here so let's put a
comma here you can add more box shadows
within the same
value within the same after the property
you can add multiple
values
0 negative 1 pixels
0 rgb a
255 255 255 and 0.1
and also inset
so that
will look a little bit like this
well you can't even really see it let's
just make it
a hard-coded like
yellow so you can see where that is
so down here
we're going to have
another
highlight down at the bottom so let's
change it back to 255 and and if i made
it a little bit more visible
you'd see the white line at the bottom
now we don't really like that i want it
more subtle so maybe let's try something
like i think
0.1 is good
super super subtle just adds a little
bit of depth to it a little bit of a of
a highlight at the bottom
remember the light source looks like
it's coming from the top so i don't want
to confuse your eyes and have
multiple light sources i guess it
doesn't matter it's up to you
but now i'm going to say another comma
zero four pixels zero and then three
three eight
eight nine four that's gonna be a shadow
on the outside
at the bottom of the
title there so it's a thick
darker
line now the reason why we did this
previous one this gentle highlight is to
give a little bit of depth to that
thick shadow on the bottom so it looks
like it's a box coming out
and
you can see if i made that just a little
bit lighter
you could see that line there now that
doesn't look as good
so
i kind of still like my original
decision of 0.1 super subtle
cool
all right now the next one we're going
to do one more box shadow zero four
pixels two pixels
rg ba
zero zero zero zero point
five
and that was going to give us a shadow
around the element altogether
so each of them kind of just pop
now we're going to do is when we hover
there's more to it here so we're going
to say
accordion
double underscore title and then hover
we're going to say background
color
is going to be oh bb
fc0
that will look a little bit like this so
it just highlights a little bit nice
usability
little feature there
now we're gonna do one last thing just a
couple more styles here i want an arrow
at the far right hand side now instead
of going to photoshop and creating one
and then creating a retina version of it
and all that sort of stuff we just want
this done in css we want it done quickly
and we're just going to use a convention
that we've already used in past videos
of using borders to create a triangle
okay
so let's say accordion
and then accordion
title
after
and now we're going to say position
absolute
of course it needs to be content empty
string
we're going to give it a
let's see right of 20 pixels so in 20
pixels from the right the width is gonna
be seven pixels
height seven pixels so pretty small
arrow
border left
two pixels a solid two pixels
white
border bottom
solid two pixels white
let's see what that looks like so far
okay so we've just got the left side
the left border and the bottom border of
a square now as you can see all we need
to do is just rotate it a little bit
45 degrees
and then position it a little bit
down
in the center vertically we're just
going to say transform and rotate
and negative 45 degrees that will
bring it
counterclockwise that's right that's
what we want
save that
there we go that looks amazing and now
we need that to be down further so we're
going to use the
we're going to go top so up here in your
right we're going to say top if i said
50
it's going to
be too far
because it's 50 from the top
of the border
which is actually like right
up here so this whole thing is about
this size so it's actually 50 from i
think it looks like it's 50 from there
yeah so 50 percent from there actually
and we need it up
probably about
seven
maybe let's try let's do this calc
because we want fifty percent
and
a pixel value so let's try that minus
seven pixels so it looks like it's too
far up
so i want to bring it down just a bit
more so say five pixels
that looks centered to me that's it
there's our css3 accordion right there
and now it should work just fine there's
your css3 accordion
uh like i said a lot of this was
cosmetic we're just playing around with
the styles but that's what css is for
after all uh the functionality of
displaying the content using that target
selector was quite simple it's just a
few lines of css and that's it to create
a css3 accordion
i hope this gave you some ideas for your
own websites applications and so on and
so forth thanks for joining me in day
number 23 hang tight day number 24 is
coming at you tomorrow bye now