1
00:00:00,300 --> 00:00:05,940
This lesson we're going to be setting up, our accordion and accordions are very useful components and

2
00:00:05,940 --> 00:00:07,230
users love them.

3
00:00:07,440 --> 00:00:11,890
So first of all, we need to open up our editor and create some device.

4
00:00:11,910 --> 00:00:13,750
So just create some random device.

5
00:00:13,980 --> 00:00:16,110
We're going to need some content in these divs.

6
00:00:16,320 --> 00:00:21,540
And as you know, with accordion, you click the top one and it opens up the rest of the text.

7
00:00:21,750 --> 00:00:24,300
So we need to have quite a bit of extra text here.

8
00:00:24,450 --> 00:00:30,060
I'm going to go to blind text to generator, and there's a number of these on line that you can utilize

9
00:00:30,060 --> 00:00:34,770
in order to get some quick and easy lorem ipsum placeholder text.

10
00:00:34,920 --> 00:00:37,380
And you can use that within this project.

11
00:00:37,500 --> 00:00:39,940
And of course, you can write your own text as well.

12
00:00:40,230 --> 00:00:45,120
So just going in there, I'm going to do a little bit of back and forth while I paste in the text.

13
00:00:45,480 --> 00:00:48,450
And also I'm going to have a little bit longer.

14
00:00:48,450 --> 00:00:50,880
One, I'm going to change this one into a div.

15
00:00:51,090 --> 00:00:54,610
And of course, the script will work on all types of elements.

16
00:00:54,610 --> 00:00:56,280
So it doesn't have to actually be a div.

17
00:00:56,460 --> 00:00:59,310
But for structure sake, I want to have them all as diffs.

18
00:00:59,610 --> 00:01:04,470
So we've got our title that we're going to click and that's going to open up the rest of the text.

19
00:01:04,690 --> 00:01:11,520
And that's the idea of the accordion, is to have hidden content that the user can click and visualize

20
00:01:11,520 --> 00:01:12,220
and see.

21
00:01:12,330 --> 00:01:13,950
So we need to duplicate the this.

22
00:01:14,340 --> 00:01:17,540
And also I'm going to do this by adding in classes.

23
00:01:17,820 --> 00:01:20,070
So this is going to be the main class.

24
00:01:20,070 --> 00:01:25,710
So it'll be the main title, one that gets clicked and this one will have a class of content.

25
00:01:26,010 --> 00:01:30,660
And this will get once it gets click, it will show that content.

26
00:01:30,670 --> 00:01:34,560
So each one of these are going to be a pair of mean and content.

27
00:01:34,560 --> 00:01:37,800
And what we can do is we can just duplicate these out.

28
00:01:37,980 --> 00:01:39,410
You can create as many as you want.

29
00:01:39,420 --> 00:01:44,490
It's we're going to make the script dynamic enough to be able to open up as many as we need.

30
00:01:44,700 --> 00:01:48,720
And I'm going to change some of the text here so that we know that there are different ones.

31
00:01:49,020 --> 00:01:54,000
And of course, if you are changing, if you're creating your own website, you're not going to be using

32
00:01:54,000 --> 00:01:56,810
the dummy text and you have actual text and information here.

33
00:01:57,090 --> 00:02:00,240
So we've got all of this information here and now.

34
00:02:00,240 --> 00:02:06,270
Next thing that we want to do is want to use some styling in order to hide that content element because

35
00:02:06,270 --> 00:02:09,110
we don't want to be able to see those by default.

36
00:02:09,750 --> 00:02:16,410
So we've got our content class and this one would just apply display property of none.

37
00:02:16,650 --> 00:02:21,090
So that will hide it from the visible area and only showing the mean ones.

38
00:02:21,120 --> 00:02:27,840
We can also add some additional styling, let's add some padding around it or update the font size to

39
00:02:27,840 --> 00:02:30,270
make it a little bit smaller than the main text.

40
00:02:30,270 --> 00:02:32,160
And we could also do a border around it.

41
00:02:32,160 --> 00:02:38,190
And you can, of course, apply your own styling as the next one that we have is our main class.

42
00:02:38,190 --> 00:02:42,060
And I'm going to make these ones a little bit bigger so that they stand out more.

43
00:02:42,450 --> 00:02:44,850
So that's updating the font size.

44
00:02:45,030 --> 00:02:50,190
And we could also add a background color so we can distinguish it from the rest of the content.

45
00:02:50,550 --> 00:02:54,140
So making them slightly darker with a darker background.

46
00:02:54,150 --> 00:02:55,820
So we've got them fairly big now.

47
00:02:56,250 --> 00:03:02,040
And lastly, but of course, not least we need to have a class that we're going to be playing with our

48
00:03:02,040 --> 00:03:04,410
JavaScript and we can call that active.

49
00:03:04,620 --> 00:03:12,360
And the way that this will work is once we click the title or the main element, it's going to show

50
00:03:12,360 --> 00:03:13,800
the one that's underneath it.

51
00:03:14,190 --> 00:03:21,540
And using Octave, it's going to apply that octave class supplying display block so that it becomes

52
00:03:21,540 --> 00:03:22,080
visible.

53
00:03:22,350 --> 00:03:27,960
Once you've added in your styling and your HTML, you're ready to move on to the next step where we're

54
00:03:27,960 --> 00:03:29,520
going to be applying our JavaScript.

55
00:03:29,820 --> 00:03:31,490
So that's coming up in the next lesson.

56
00:03:31,740 --> 00:03:37,920
Go ahead and set up your page just as I've set up this page and you're ready to move on to the next

57
00:03:37,920 --> 00:03:38,190
one.

58
00:03:38,370 --> 00:03:42,090
And of course, this content doesn't have to be identical to mine.

59
00:03:42,090 --> 00:03:48,090
You can add in your own content just keeping in mind that the second div with the class of content will

60
00:03:48,090 --> 00:03:49,410
always be the hidden one.

61
00:03:49,560 --> 00:03:52,530
And that's the one that's going to show once we click these titles.