1
00:00:00,180 --> 00:00:05,850
Hey, this lesson is going to be a quick lesson on setting up the HTML and preparing our file in order

2
00:00:05,850 --> 00:00:07,080
to handle the accordion.

3
00:00:07,200 --> 00:00:08,700
So this is all HTML.

4
00:00:08,710 --> 00:00:14,490
I'm going to add in some classes to make it easy to select and manipulate these elements later on with

5
00:00:14,490 --> 00:00:15,330
the JavaScript.

6
00:00:15,690 --> 00:00:20,790
And there is an exercise in this lesson and that's to create the structure, just as I'm doing for the

7
00:00:20,790 --> 00:00:21,420
accordion.

8
00:00:21,540 --> 00:00:23,160
So you can add in your own content.

9
00:00:23,340 --> 00:00:27,850
Each piece of each panel will have a head and as well a body.

10
00:00:28,110 --> 00:00:31,260
So I've given a class of a head and a body of a body.

11
00:00:31,500 --> 00:00:33,450
And this is where I'm going to host the content.

12
00:00:33,570 --> 00:00:36,120
And these are the ones are going to open up when you click the head.

13
00:00:36,240 --> 00:00:40,740
It's going to show the body content so you can go out and add your own or you could do the same ones

14
00:00:40,740 --> 00:00:41,390
that I'm doing.

15
00:00:41,430 --> 00:00:43,190
I'll walk you through how to set this up.

16
00:00:43,500 --> 00:00:49,590
So within the editor, we're going to open up and create a brand new file and then save the file as

17
00:00:49,590 --> 00:00:53,610
indexed HTML, create a basic HTML structure.

18
00:00:53,730 --> 00:00:56,300
Then within the body, let's set up the HTML.

19
00:00:56,370 --> 00:01:01,830
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

20
00:01:01,830 --> 00:01:06,130
to be our main container for the accordion and you can call it accordion as well.

21
00:01:06,180 --> 00:01:10,170
We're all going to need to be the same because that's how we're going to be selecting the elements with

22
00:01:10,170 --> 00:01:10,910
JavaScript.

23
00:01:11,220 --> 00:01:16,050
So let's set up the basic structure for one and we're going to copy and paste the other ones.

24
00:01:16,350 --> 00:01:18,210
So we're going to give it a class of panel.

25
00:01:18,360 --> 00:01:21,570
So that's going to be the mean parent of each panel.

26
00:01:21,960 --> 00:01:28,290
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

27
00:01:28,320 --> 00:01:28,800
body.

28
00:01:28,950 --> 00:01:35,340
And then we're going to use this content in order to add JavaScript and make the functionality so we

29
00:01:35,340 --> 00:01:40,800
can call it panel one head, panel one body, and you can put whatever content you want in here, you

30
00:01:40,800 --> 00:01:44,280
can put images and you can also have some HTML structure.

31
00:01:44,460 --> 00:01:47,370
So whatever you want, you can put in there and it will all work the same.

32
00:01:47,390 --> 00:01:48,780
We will hide and show it.

33
00:01:49,140 --> 00:01:53,340
Let's duplicate these and just update the content that's contained in there.

34
00:01:53,490 --> 00:01:59,760
Don't update any of the classes and see if going to do a quick life preview so we can see what it's

35
00:01:59,760 --> 00:02:00,420
going to look like.

36
00:02:00,750 --> 00:02:02,670
And so far, you're not going to see a whole lot.

37
00:02:02,910 --> 00:02:04,290
It's going to be fairly plain.

38
00:02:04,620 --> 00:02:10,140
And as we apply some styling and JavaScript, that's we're going to bring all the functionality in.

39
00:02:10,440 --> 00:02:12,690
So go ahead and set up the project just as I have.

40
00:02:12,810 --> 00:02:16,530
And you could be ready to move on to the next step will apply a little bit styling and they'll dive

41
00:02:16,530 --> 00:02:17,730
into the JavaScript part of it.