Hey, this lesson is going to be a quick lesson on setting up the HTML and preparing our file in order
to handle the accordion.
So this is all HTML.
I'm going to add in some classes to make it easy to select and manipulate these elements later on with
the JavaScript.
And there is an exercise in this lesson and that's to create the structure, just as I'm doing for the
accordion.
So you can add in your own content.
Each piece of each panel will have a head and as well a body.
So I've given a class of a head and a body of a body.
And this is where I'm going to host the content.
And these are the ones are going to open up when you click the head.
It's going to show the body content so you can go out and add your own or you could do the same ones
that I'm doing.
I'll walk you through how to set this up.
So within the editor, we're going to open up and create a brand new file and then save the file as
indexed HTML, create a basic HTML structure.
Then within the body, let's set up the HTML.
We need a div, give it a class so that you can identify it and give it a class of mean as it's going
to be our main container for the accordion and you can call it accordion as well.
We're all going to need to be the same because that's how we're going to be selecting the elements with
JavaScript.
So let's set up the basic structure for one and we're going to copy and paste the other ones.
So we're going to give it a class of panel.
So that's going to be the mean parent of each panel.
And then each one is going to contain a head div as well as a div that's going to have a class of a
body.
And then we're going to use this content in order to add JavaScript and make the functionality so we
can call it panel one head, panel one body, and you can put whatever content you want in here, you
can put images and you can also have some HTML structure.
So whatever you want, you can put in there and it will all work the same.
We will hide and show it.
Let's duplicate these and just update the content that's contained in there.
Don't update any of the classes and see if going to do a quick life preview so we can see what it's
going to look like.
And so far, you're not going to see a whole lot.
It's going to be fairly plain.
And as we apply some styling and JavaScript, that's we're going to bring all the functionality in.
So go ahead and set up the project just as I have.
And you could be ready to move on to the next step will apply a little bit styling and they'll dive
into the JavaScript part of it.