1
00:00:01,110 --> 00:00:08,250
Hello, in the video, we are going to take a look at collapsible items, so this is great if you have

2
00:00:08,250 --> 00:00:12,300
quite a bit of information and you don't want to show it all at once on screen.

3
00:00:12,390 --> 00:00:18,390
Imagine if you've got a bunch of different sections and depending on what do you the ones they can open

4
00:00:18,390 --> 00:00:19,530
up a particular section.

5
00:00:19,710 --> 00:00:21,870
That's where a collapse comes in.

6
00:00:21,900 --> 00:00:23,430
It's really simple to implement.

7
00:00:23,790 --> 00:00:31,260
So first of all, you want some sort of, you know, button to basically trigger this.

8
00:00:31,650 --> 00:00:36,600
So I'm going to put on a wrap it up in a P tag just so it's blocking every element.

9
00:00:36,810 --> 00:00:45,090
But you can do it however you want to push a button and the cloth doesn't actually matter.

10
00:00:45,300 --> 00:00:53,040
This literally is just for standin in line with the style system in bootstrap, but you could do it

11
00:00:53,040 --> 00:00:54,090
however you want.

12
00:00:54,270 --> 00:01:01,440
This isn't actually a requirement type of what you can do that a hatred for this and you can get more

13
00:01:01,440 --> 00:01:04,130
information about on the Bistrot website.

14
00:01:04,140 --> 00:01:10,530
I will provide a link to this where it shows how to, you know, do a few more X's stuff, including

15
00:01:11,070 --> 00:01:14,920
some detection with JavaScript as well.

16
00:01:15,300 --> 00:01:17,820
So, OK, we are type of bottom.

17
00:01:18,120 --> 00:01:21,480
Then we need to specify a data toggle attribute.

18
00:01:21,730 --> 00:01:23,660
And this is going to be colorful.

19
00:01:23,820 --> 00:01:25,260
Basically what it's doing.

20
00:01:26,530 --> 00:01:35,140
The next we need to have a data target and this is an I.D. of something that we're going to collapse

21
00:01:35,140 --> 00:01:40,270
and, you know, open, we know we haven't created it yet, but I know what I'm going to assign as the

22
00:01:40,270 --> 00:01:48,310
already so hash specifying that you are targeting it using this already is going to put epic collapse.

23
00:01:48,320 --> 00:01:49,300
That's why I'm calling it.

24
00:01:50,530 --> 00:01:59,590
And they're going to put area dash expandable, expanded eco's false.

25
00:02:00,190 --> 00:02:08,890
And then we are going to put area controls and this is going to be epic.

26
00:02:13,630 --> 00:02:21,430
OK, so we don't need to put anything inside the button other than just some no basic tech like show

27
00:02:21,430 --> 00:02:21,880
mall.

28
00:02:22,570 --> 00:02:29,930
And now we're going to actually reload this the page before we get we get the bottom line.

29
00:02:29,950 --> 00:02:32,230
It doesn't do anything right now.

30
00:02:32,230 --> 00:02:35,650
Refresh the actual text editor.

31
00:02:36,220 --> 00:02:37,120
A little mistake.

32
00:02:37,210 --> 00:02:42,400
My never going to actually create the thing that collapses, that opens and closes.

33
00:02:42,940 --> 00:02:49,360
So we're going to put a div into a class of collapse that we have an idea.

34
00:02:49,480 --> 00:02:53,620
And this has to be the same as this right here.

35
00:02:57,200 --> 00:03:05,600
And now we're going to do is, you know, in here, you can pull what you want is literally up to you.

36
00:03:05,840 --> 00:03:09,950
I'm going to use a card that we've already covered in a separate video.

37
00:03:09,960 --> 00:03:13,220
So feel free to check that out card on the card.

38
00:03:13,790 --> 00:03:15,880
Keep it simple, but you can make it more complex.

39
00:03:15,890 --> 00:03:20,840
You put a video in here, an image, text links in here, whatever you want.

40
00:03:21,200 --> 00:03:30,530
And I'm going to put the lorem ipsum text, which is common, the use of placeholder of a placeholder,

41
00:03:30,530 --> 00:03:35,680
I should say, not a placeholder, a placeholder, if I saved up, should be ready to go.

42
00:03:35,690 --> 00:03:41,040
So if I give it a reload click that it opens and closes, it opens and closes it.

43
00:03:41,360 --> 00:03:42,880
That's basically what it is.

44
00:03:42,980 --> 00:03:44,450
Nothing more to it than that.

45
00:03:44,630 --> 00:03:52,280
If, for example, after this I did some random text, this is what looks like and see what happens

46
00:03:52,880 --> 00:03:59,900
if I want to open it, you just moves anything that's below it in the GML structure, even though you

47
00:03:59,900 --> 00:04:03,550
may not be able to see this yet, you just move that down.

48
00:04:03,560 --> 00:04:04,570
So simple.

49
00:04:05,570 --> 00:04:09,980
OK, you can also target multiple items.

50
00:04:09,990 --> 00:04:12,740
So if I was to duplicate this.

51
00:04:14,760 --> 00:04:21,840
And let's say five, put an extra I.D. in the extra I.D. or extra class.

52
00:04:27,940 --> 00:04:30,250
He's there when that happened.

53
00:04:30,460 --> 00:04:36,870
You said blessed, OK, so paced up there and instead of doing a day to that story on an idea, well,

54
00:04:36,880 --> 00:04:38,800
we would do it on a cloth which is docked.

55
00:04:38,800 --> 00:04:45,460
And then the name of the class preload, as you can see, it expands all of them.

56
00:04:45,460 --> 00:04:50,120
And, you know, you technically could have a text in between as well as fine as well.

57
00:04:51,010 --> 00:04:52,840
You know, they don't have to be joined.

58
00:04:53,300 --> 00:04:59,830
And it's as simple as I'm going to send you back to the single day, but that's it.

59
00:05:00,450 --> 00:05:02,980
If you have any questions, feel free to drop me a message.

60
00:05:03,160 --> 00:05:06,420
And as usual, I look forward to seeing you in the next video.