1
00:00:00,450 --> 00:00:07,090
We can create tab in pill menus that dynamically update content when a link is clicked as seen in this

2
00:00:07,090 --> 00:00:08,030
example.

3
00:00:08,170 --> 00:00:11,310
When a tab is clicked the content changes below

4
00:00:15,700 --> 00:00:16,970
to create this.

5
00:00:16,990 --> 00:00:23,360
We start with a well element and set the class to NAV and NAV tabs.

6
00:00:25,970 --> 00:00:33,070
Next we create our list items that will serve as the tab links we can see here that we have for list

7
00:00:33,070 --> 00:00:44,200
items and each one has its own label link one link to link 3 and link for each item must have an H R

8
00:00:44,320 --> 00:00:46,390
F attribute with the link.

9
00:00:46,390 --> 00:00:51,320
Name set to the div that contains the corresponding content.

10
00:00:52,540 --> 00:00:55,200
For example link 1.

11
00:00:55,540 --> 00:01:01,070
We can see that the H R F attribute is set to LB link 1.

12
00:01:01,210 --> 00:01:09,730
This link will display the content inside this div with its I.D. set to link 1 but we'll come back to

13
00:01:09,730 --> 00:01:11,200
this area in a moment.

14
00:01:15,690 --> 00:01:20,850
The list item must also have a data toggle attribute set to tab.

15
00:01:22,670 --> 00:01:25,040
So you can see that that's consistent all the way through

16
00:01:28,790 --> 00:01:31,670
after our hour unordered list.

17
00:01:31,670 --> 00:01:36,070
We create a div with the class tab content

18
00:01:39,570 --> 00:01:49,440
this div will contain all of our content items we can see the first content item in this div it has

19
00:01:49,440 --> 00:01:50,650
the link I.D..

20
00:01:51,090 --> 00:01:54,190
Sorry it has the I.D. link 1.

21
00:01:54,400 --> 00:02:00,820
It also has 4 classes tab pane feed in an active

22
00:02:03,940 --> 00:02:11,550
the div element contains the heading you see here and the word content below the heading.

23
00:02:14,150 --> 00:02:20,300
So here you can see link 1 in content which was which corresponds to what you see here

24
00:02:25,670 --> 00:02:29,280
the next div here is for corn content.

25
00:02:29,300 --> 00:02:32,320
Item corresponding to link 2.

26
00:02:32,360 --> 00:02:40,600
So here we can see H.R. yes is that to link to our div I.D. is set to link to.

27
00:02:40,670 --> 00:02:42,350
So remember those must always match

28
00:02:45,680 --> 00:02:47,920
everything else is more or less the same.

29
00:02:47,930 --> 00:02:53,520
The only thing that changes is padding your content.

30
00:02:53,530 --> 00:02:58,360
Would also change and same for a div.

31
00:02:58,360 --> 00:03:01,210
The third div the ideas linked 3.

32
00:03:01,220 --> 00:03:11,940
The header is Link 3 and the same for the last ID which corresponds to link form and you can see that

33
00:03:11,940 --> 00:03:13,920
the content switch is off.

34
00:03:16,210 --> 00:03:22,360
And corresponds to its own link and that's how that works.

35
00:03:23,200 --> 00:03:33,720
We can change this dynamic tab menu to a dynamic pill menu by updating a few classes so if we set if

36
00:03:33,720 --> 00:03:39,300
you go back to your unordered list element and change the NAV tabs.

37
00:03:39,300 --> 00:03:49,890
Class 2 def pills and also change the data toggle attribute to pill and if you save your file and refresh

38
00:03:50,990 --> 00:04:00,260
you'll notice that the the links are now pills rather than tabs the functionality and everything else

39
00:04:00,260 --> 00:04:00,920
is all the same.