Dreamweaver CS4 Tutorial - 39 - Accordion Video Lecture | How to create Responsive Websites with DreamWeaver - Software Development

what's up in this tutorial we're going
to go over spry accordion this is
similar to the tabbed panels that we
went over in the last tutorial except
it's it's not actually tabbed it's it's
what's called an accordion the
difference between the two is is well
it'll be visible whenever whenever I
show you in a second but there are both
actual tools that are used in a web page
to display content and to organize it
basically you'll have instead of here
will have accordions instead of tabs and
will have the same content but we'll
just be displaying it differently so uh
let's let's create one and then this
will make sense when I create it so go
over here inside of insert spry and go
to spry accordion and it inserts all of
the code force and you can see the
difference between this one the last one
is that we had an owner list here before
and now we have divs and we have the
actual label for the div or for the the
accordion inside of the first and second
div instead of all of the labels inside
of the first owner list so let's run
this and I'll show you what it looks
like you see we have the label one and
the content one and then when we click
on label too it's going to move up and
just going to show us what's inside
label too just like that
and you create as many of these
accordions as you need you say it's just
like you do in the last one you go and
click on ADD and it will add it for you
just like that so now you can see then
instead of having to we have three and
we can move back and forth in between
each one and just like with the tab
panels you can control the look and feel
of all of this inside of the CSS here
you can see all the different styles
there and feel free to go in and edit
them and change it around so you can
make it look exactly how you want to
make it look and that is basically all
you need to know about how to create
accordions inside of Dreamweaver cs4
these things are really cool when you're
dealing with different pieces of data
that you want to display but they all
they are similar in a way and you can
put them all in a little accordion and
the user can scroll or not scroll but
click and she can she or he can see what
is inside of each accordion and the next
tutorial we're going to be going over
class collapsible panels we're actually
going to be taking a few things that we
learned in the past forms series and
using that inside of the collapsible
panels this next tutorial is my favorite
thing that has to do with spry so make
sure and watch that because I think you
guys are really really going to like the
collapsible panels so I will see you in
the next tutorial