1
00:00:00,550 --> 00:00:07,690
This is the last lesson of the S. I hope you had an opportunity to try coding this JavaScript, according

2
00:00:07,690 --> 00:00:08,170
yourself.

3
00:00:08,480 --> 00:00:15,040
I've stripped away some of the excess code and just brought it back down to the bare bones functionality

4
00:00:15,340 --> 00:00:21,820
so that this way, if you wanted to, you could take this code and repurpose it and reuse it within

5
00:00:21,820 --> 00:00:23,360
your own projects.

6
00:00:23,410 --> 00:00:30,490
We're going to do a quick run through of what's important here within the code as we built this project.

7
00:00:30,640 --> 00:00:36,210
So the most important part is for the body to display none, and that's the default state.

8
00:00:36,490 --> 00:00:42,220
So we have a default state where the body is done if you actually want one of these panels to be open

9
00:00:42,460 --> 00:00:43,350
by default.

10
00:00:43,510 --> 00:00:47,860
So whenever the page thoughts you want to be open, you can always add the octave class.

11
00:00:48,010 --> 00:00:51,130
And this will still function whenever you click any of the other ones.

12
00:00:51,250 --> 00:00:54,550
It will still close that one because this one has an active clause.

13
00:00:54,820 --> 00:00:59,950
So that's another option as well, if you want to have it as one of them as an opened state.

14
00:00:59,950 --> 00:01:05,740
And this was where the important class was that we're using JavaScript in order to add and remove the

15
00:01:05,740 --> 00:01:06,700
active class.

16
00:01:06,730 --> 00:01:11,890
And the rest of the styling was just to distinguish between the head and the body content.

17
00:01:12,100 --> 00:01:14,610
And of course, you can apply your own styling as needed.

18
00:01:14,740 --> 00:01:19,780
Now you can add in any number of panels, as many as you want, as long as they're contained within

19
00:01:19,780 --> 00:01:22,920
the main div, because that's where we're applying the styling to.

20
00:01:23,140 --> 00:01:30,670
You could remove out mean and just look for active and a body and head and a body so you can do that

21
00:01:30,670 --> 00:01:33,040
as well if you want to be a little bit more flexible.

22
00:01:33,520 --> 00:01:39,160
But generally I like to keep it as a class of men, or you could give it a class of accordion and rename

23
00:01:39,160 --> 00:01:41,710
it so that you can reuse it within your projects.

24
00:01:41,890 --> 00:01:47,620
And none of the classes should overlap with any of the existing classes you have in your project.

25
00:01:47,980 --> 00:01:49,180
So just keep that in mind.

26
00:01:49,270 --> 00:01:55,420
And then within the panel, we have a head, we have a body to make sure the structure is the same for

27
00:01:55,420 --> 00:01:56,140
each one.

28
00:01:56,140 --> 00:01:59,440
And you could just simply copy and paste and add as many panels as you want.

29
00:01:59,650 --> 00:02:01,950
And when you reload the page, they're all going to be working.

30
00:02:02,290 --> 00:02:09,130
We use JavaScript, query, select all so selected all of the elements on the page of the class of panel

31
00:02:09,460 --> 00:02:17,080
put into an object called accordion that would loop through the accordion object and selected all of

32
00:02:17,080 --> 00:02:19,210
the elements that were available.

33
00:02:19,450 --> 00:02:24,940
So this was actually returning back a node list that had a length that we could loop through.

34
00:02:25,360 --> 00:02:31,660
And simply as we select each one of the elements available within the node list, we're adding an event

35
00:02:31,660 --> 00:02:38,340
listener and the listener was listening for Toggle Al and that's where we were applying it, the function.

36
00:02:38,350 --> 00:02:45,730
So each time one of these elements gets clicked, we were adding in the were we toggling the class of

37
00:02:45,730 --> 00:02:46,360
active?

38
00:02:46,750 --> 00:02:49,310
So that allowed us to close and open.

39
00:02:49,340 --> 00:02:55,900
Now there is an issue that if you want to close the panel again by clicking it, you're not able to

40
00:02:55,900 --> 00:02:56,320
do that.

41
00:02:56,440 --> 00:03:03,580
And the reason is that we're looping through all the elements and removing active and we're toggling

42
00:03:03,580 --> 00:03:05,050
active on that one.

43
00:03:05,210 --> 00:03:06,550
So that's what stays open.

44
00:03:06,730 --> 00:03:13,270
And you can see this when you inspect the element and look at what classes are being applied to the

45
00:03:13,270 --> 00:03:13,660
panel.

46
00:03:13,660 --> 00:03:18,970
We see we've got active, they're now active, applied there and active as applied there.

47
00:03:19,150 --> 00:03:24,520
So we go to toggle activists already gone and it's already been removed.

48
00:03:24,520 --> 00:03:28,570
And that's why we've got that issue where we're not able to pick it up.

49
00:03:28,870 --> 00:03:30,430
But there is a solution for this.

50
00:03:30,430 --> 00:03:37,330
And I'm just going to do a quick run through of how we can solve this problem so we can select the element

51
00:03:37,330 --> 00:03:38,590
target parent.

52
00:03:38,860 --> 00:03:40,960
And you might want to use this one as well.

53
00:03:41,290 --> 00:03:47,920
So this is selecting the element target parent, because when we pick up the event target, we're either

54
00:03:47,920 --> 00:03:49,180
getting the header or the body.

55
00:03:49,330 --> 00:03:50,440
We're not getting the parent.

56
00:03:50,740 --> 00:03:56,440
So each one of them will have the same parent when we look at the structure and this will allow us to

57
00:03:56,470 --> 00:03:57,460
select panel.

58
00:03:57,700 --> 00:04:05,890
So that would be getting the parent and clear the console and just show you that this case now we're

59
00:04:05,890 --> 00:04:10,690
getting the active panel and we see that the active class is being applied there, and that's the one

60
00:04:10,690 --> 00:04:11,920
that we want to look for.

61
00:04:12,190 --> 00:04:19,390
So as we're looping through all of the elements, we can have a condition that checks to see if the

62
00:04:19,390 --> 00:04:24,790
element that we're on is equal to the same one as the parent.

63
00:04:24,790 --> 00:04:30,700
And if it is, then we can apply condition and we can also have a false statement.

64
00:04:30,910 --> 00:04:36,490
And the condition is that if it's the active one, we're going to toggle.

65
00:04:36,820 --> 00:04:41,800
And if it's not the active one, then we're just going to remove active and really it shouldn't have

66
00:04:41,800 --> 00:04:42,340
active.

67
00:04:42,340 --> 00:04:44,620
But this is just to be sure and just to be safe.

68
00:04:44,650 --> 00:04:50,410
So when we do it this way, we need to also update this, because this is no longer relevant, because

69
00:04:50,410 --> 00:04:55,600
it's within this scope now and we've moved it out of the main scope.

70
00:04:55,810 --> 00:04:59,110
So it's not going to be able to identify what this is.

71
00:04:59,350 --> 00:04:59,920
And this is what.

72
00:05:00,000 --> 00:05:07,050
We can use e, l e or we could use the element target parent, because it's going to look to the parent

73
00:05:07,050 --> 00:05:13,570
scope to figure out what the value of the existing element of that object target is.

74
00:05:13,710 --> 00:05:16,140
So let's save that and refresh.

75
00:05:16,410 --> 00:05:21,060
And now you can see when we click them, they actually close the open ones.

76
00:05:21,420 --> 00:05:26,340
And that's because it's picking up and it's looping through and it's checking to see if the element

77
00:05:26,340 --> 00:05:28,740
is the same one that we've got open.

78
00:05:28,860 --> 00:05:31,380
And that's the way to apply that type of fix.

79
00:05:31,870 --> 00:05:32,970
So you may need that.

80
00:05:32,970 --> 00:05:34,080
You may not want that.

81
00:05:34,290 --> 00:05:39,420
And you can really customize this as needed if you have any questions or comments.

82
00:05:39,430 --> 00:05:44,580
I'm always happy to help clarify any of the content that's been presented, and I do encourage you to

83
00:05:44,580 --> 00:05:50,340
try it out, experiment a little bit and get the accordion working the way you want it to work and also

84
00:05:50,340 --> 00:05:52,710
apply some styling and make it look really nice.

85
00:05:53,100 --> 00:05:57,270
Thanks again for taking the course and look forward to seeing you in the next one.