1
00:00:00,180 --> 00:00:05,550
Welcome to the JavaScript accordion section in the upcoming lessons, so I'm going to be walking you

2
00:00:05,550 --> 00:00:09,090
through how to build a JavaScript accordion from scratch.

3
00:00:09,270 --> 00:00:10,440
Going could be quite flexible.

4
00:00:10,590 --> 00:00:16,560
And it's going to allow you to add in content into the body content area, update the head and you can

5
00:00:16,560 --> 00:00:17,850
also apply some styling.

6
00:00:17,980 --> 00:00:21,570
And we're going to walk through just different ways how we can handle accordions.

7
00:00:21,720 --> 00:00:23,220
And this is all built from scratch.

8
00:00:23,220 --> 00:00:29,790
And the upcoming lessons objective of the upcoming lessons in particular within this section is to get

9
00:00:29,790 --> 00:00:31,500
you coding JavaScript.

10
00:00:31,800 --> 00:00:35,130
So I've got to have a number of exercises in each lesson.

11
00:00:35,250 --> 00:00:37,350
I'm going to present the challenge to you.

12
00:00:37,500 --> 00:00:39,420
See this pop up counter show up.

13
00:00:39,540 --> 00:00:41,130
That means it's your turn to code.

14
00:00:41,280 --> 00:00:44,990
And then I show you the solution and it's up to you to try it out.

15
00:00:45,240 --> 00:00:48,750
We're going to start with simply setting up an HTML accordion.

16
00:00:48,990 --> 00:00:55,320
So the simple structure for the accordion, applying all of the classes as attributes for the elements

17
00:00:55,530 --> 00:00:59,030
and then apply some staling to make it look more like an accordion.

18
00:00:59,340 --> 00:01:03,660
And this is all going to be done with scissors and as well as HTML.

19
00:01:03,750 --> 00:01:08,820
And then we get into the JavaScript and this is where the fun part comes in, where we make things happen

20
00:01:09,090 --> 00:01:14,790
using query selector all selecting all the elements and then looping through the node list that gets

21
00:01:14,790 --> 00:01:20,670
returned and selecting those elements that we're going to play an event listener to those elements and

22
00:01:20,670 --> 00:01:25,260
also have a function that's going to output the event target.

23
00:01:25,290 --> 00:01:33,390
That's triggering also how you can use classlessness to toggle add, remove classes from elements and

24
00:01:33,390 --> 00:01:39,210
then more of what we can do to make this fully functional, hiding all the open panels and then some

25
00:01:39,210 --> 00:01:45,420
finishing touches with staling and some additional options you might want to include within your accordion

26
00:01:45,600 --> 00:01:51,990
if you have any questions or comments or want clarity on any of the topics that are covered in the upcoming

27
00:01:51,990 --> 00:01:54,650
lessons, let me know within the Q&A section.

28
00:01:54,660 --> 00:01:55,800
I'd love to hear from you.

29
00:01:56,190 --> 00:01:57,120
So let's get coding.