1
00:00:00,330 --> 00:00:04,230
OK, so we can see the problem with a simple.

2
00:00:05,040 --> 00:00:12,870
Well, what is the solution if we take a look at the index, VSS and more specifically, if you are

3
00:00:12,870 --> 00:00:14,940
looking at the links container.

4
00:00:15,180 --> 00:00:20,100
So that is, of course, the Divx that has the on our list.

5
00:00:20,430 --> 00:00:28,680
You'll notice that there is some success already and that Xerces is had zero hour for hidden and then

6
00:00:28,680 --> 00:00:30,420
I have a bit of transition.

7
00:00:30,750 --> 00:00:35,080
And then of course I have this shell container class that adds that.

8
00:00:35,520 --> 00:00:36,850
So what is happening over here?

9
00:00:37,170 --> 00:00:43,860
Well, if we navigate back to the number, I'll get rid of my conditioner under here, because that

10
00:00:43,860 --> 00:00:45,630
is not the approach we will use.

11
00:00:45,960 --> 00:00:50,100
And you'll notice that, of course, we can see what is beautiful.

12
00:00:50,310 --> 00:00:55,290
But then once I remove that show container class, then the links are hidden.

13
00:00:55,710 --> 00:01:02,280
And this is also something that we have done already before where depending on state value, I could

14
00:01:02,280 --> 00:01:04,260
add or remove the class.

15
00:01:04,500 --> 00:01:06,090
Just please understand the success.

16
00:01:06,420 --> 00:01:07,830
So I have my next container.

17
00:01:07,950 --> 00:01:09,450
Yes, that is beautiful.

18
00:01:09,690 --> 00:01:12,150
And then by default, I hide it.

19
00:01:12,390 --> 00:01:16,950
I say hide zero or hidden, and then I add a bit of transition.

20
00:01:17,190 --> 00:01:23,280
And then only once I add this show container class, then I get the height.

21
00:01:23,460 --> 00:01:29,510
That's why in a number, if you slide show container, then you'll be able to see.

22
00:01:29,790 --> 00:01:34,410
And now of course, we just need to make this dynamic and we already know that in order to do that,

23
00:01:34,830 --> 00:01:40,520
we would need to set up the Curley's because we to want to go back to JavaScript or have our templates

24
00:01:40,520 --> 00:01:48,750
string, because I would want to toggle the value and all right away set up my operator where I'm going

25
00:01:48,750 --> 00:01:52,140
to check the value for the show length here.

26
00:01:52,590 --> 00:01:59,640
So I'm going to go back to the jouster plan during the interpolation and then I'll say, if show length

27
00:01:59,640 --> 00:02:05,490
is true, then return oinks container plus show container class.

28
00:02:05,700 --> 00:02:08,070
If not, then just the container.

29
00:02:08,460 --> 00:02:12,300
So we go with Questionmark and then we have the colon.

30
00:02:12,600 --> 00:02:19,380
So of course this is going to be if the show links is false, then I would just want to display the

31
00:02:19,380 --> 00:02:21,360
links container like so.

32
00:02:21,580 --> 00:02:29,340
However, if the show links is true, then I would want to display both our own display links, container

33
00:02:29,940 --> 00:02:32,790
links container, which by the way, I could have just pasted.

34
00:02:32,790 --> 00:02:37,680
And then I also want to show show container class.

35
00:02:38,160 --> 00:02:42,950
And now, of course, once we click n now we're nicely animating.

36
00:02:43,200 --> 00:02:47,040
Now there's a different issue and I'll talk about the issue in a second.

37
00:02:47,490 --> 00:02:52,430
But at least now the change is happening over time.

38
00:02:52,710 --> 00:02:54,450
It is not happening instantly.

39
00:02:54,840 --> 00:02:56,920
OK, so what is the issue?

40
00:02:57,360 --> 00:03:01,830
Well, the issue right now is that in the indexes, notice this height.

41
00:03:02,610 --> 00:03:07,740
So this height is ten arms and essentially I'm hard coding this volume.

42
00:03:08,460 --> 00:03:17,910
And even though it might not look like a big deal, problem is, as my legs are changing, well, the

43
00:03:17,910 --> 00:03:20,150
value still stays hardcoded.

44
00:03:20,580 --> 00:03:27,270
So essentially, you probably noticed that we have five links, but I cannot see that 15 y well, because

45
00:03:27,270 --> 00:03:28,850
here the value is hardcoded.

46
00:03:29,160 --> 00:03:33,330
So if I go with 15, then of course I'll be able to see my link.

47
00:03:33,330 --> 00:03:37,840
And of course there's some space because I don't match exactly the length that I have.

48
00:03:38,190 --> 00:03:46,170
So what I'm trying to say is that, yeah, it is nice, but the value is hardcoded so this won't change

49
00:03:46,170 --> 00:03:47,160
depending on my liked.

50
00:03:47,490 --> 00:03:54,660
But what I would want is if I had more links, then of course the container is bigger and that if I

51
00:03:54,660 --> 00:03:57,840
had less links and of course my container is smaller.

52
00:03:58,140 --> 00:04:01,050
So I still want the change over time.

53
00:04:01,230 --> 00:04:08,130
But I also would want to somehow check how many links I have and then create the height for the container

54
00:04:08,340 --> 00:04:09,840
depending on that.