1
00:00:00,270 --> 00:00:04,680
In this section, we're going to be covering how to build a JavaScript accordion, so these are useful

2
00:00:04,680 --> 00:00:07,770
components that you can include on your Web pages and websites.

3
00:00:08,100 --> 00:00:13,320
The objective here is to get more familiar with hiding and showing elements and element manipulation,

4
00:00:13,320 --> 00:00:15,760
as well as click events listening for those click events.

5
00:00:16,110 --> 00:00:21,780
So what happens with an accordion is that you hover over the title, you can click it and it opens up

6
00:00:21,780 --> 00:00:22,800
the rest of the content.

7
00:00:22,980 --> 00:00:27,450
If you click any other part of the accordion, then that content opens up and you can adjust and tweak

8
00:00:27,450 --> 00:00:27,720
this.

9
00:00:27,810 --> 00:00:29,520
Sometimes you might want to keep them all open.

10
00:00:29,520 --> 00:00:31,440
Sometimes you might want to close them.

11
00:00:31,590 --> 00:00:33,690
So all of this is covered within the section.

12
00:00:33,780 --> 00:00:40,430
How to build this from scratch, adding and hiding, showing different parts of the web, visible content.

13
00:00:40,860 --> 00:00:43,470
So let's open this up and I'll show you how this works.

14
00:00:43,980 --> 00:00:49,230
So I've got some placeholder content in here and I've got four different parts to the accordion, so

15
00:00:49,230 --> 00:00:50,370
four different sections.

16
00:00:50,490 --> 00:00:51,960
And you can add as many as you want.

17
00:00:51,990 --> 00:00:57,480
So the code is dynamic, flexible, and it can update depending on how many sections you have within

18
00:00:57,480 --> 00:00:57,970
the accordion.

19
00:00:58,230 --> 00:00:58,680
So that's it.

20
00:00:58,710 --> 00:01:02,510
So you click it, it opens up and you can see more content to try the same.