Have these tabs over here and this is the content inside the first tab now if i click on the second tab we can see we have the content of the second tab we have the third tab and we have the.
Fourth tab and we also have this changed color for the active tab so this is what we're gonna design in this video using html css and javascript so let's get started.
right here i have created this folder called vertical tabs and i just opened it with vs code so let's start by creating the necessary files so let's.
Click on new file and let's create a new file for the html so i'll just type index.html and let's create a file for css so let's tap style.
Dot css and let's also create a javascript file i'll just name it main.js or let's start with the index.html file now in vs code you have the shortcut.
Type style.css and in the body let's link the javascript file so here let's type script call an src and press tab and here in the src i'll just type main.js all right now the first thing we.
Will do is we'll create a container division to hold everything so we'll create a division with a class of tabs container to hold all of this so i'll just create a division with a.
Class of tabs container and in that the first thing we will do is create all these tabs so we have four tabs over here so we'll create a container division for.
That as well so i'll just type tabs and in that we will have divisions with the class of tab now in this division we need to have this text tab one tab two through tab.
Four you can add any text you want over here so let's type tab one and i'll just duplicate this and we need three more tabs i'll just duplicate it.
Three more times and i'll just change Wesdigital
This to tab two tab three and tab four all right now the next thing we need to do is add the content so let's create a division with.A class of content container and in that for each of the content we will have a division with a class of content now in the content we need to have a.
Heading so for the heading we will have an s3 and for the first heading i'll just type heading one.
And then for this text we will have paragraphs so let's create a paragraph and i'll just copy this text and i'll just paste it over here and let's create one more paragraph.
And here i'll just copy and paste this text you can go ahead and add your own content over here you can also add images list or whatever.
You want over here right now i'll just copy this content division and i'll just paste it three more times and let's change the content so for the second one i'll just type heading 2.
And we'll just make some changes over here let's go to the second tab and i'll just copy this text and paste it over here in the second paragraph.
Let's go to the third heading and i'll just type heading 3 and for this i'll just copy this paragraph from here and i'll just paste it over here.
I just wanted to have different lengths of paragraphs so that we can identify between different content and then for the last heading i'll just type heading 4 and we just have one.
Paragraph over here so i'll just delete
The second paragraph right that's basically it with the html of our vertical tab now let's open this in our browser so i have this extension.Called live server installed in vs code now once you install this you can just right click over here in the html and click on open with live server and here we can see all the content of.
Our website now let's style this using css all right so let's go to our css file and first of all let's target the tabs container so we can see we have this division with.
The class of tabs container so here just tab dot tabs container and first of all let's set the font family to roboto and send serif.
And i'll just set the max width to 700 pixels and we'll also set a min height of 400 pixels so it will have a minimum height of 400 pixels and we'll also set.
The margin to 30 pixels top and bottom and auto for left and right so that it will be in the center and we'll also set the display to flex because here we can see we have the tabs.
At the left and we have the content at the right so let's type display of flex and now we can see we have the tabs on the left and we have the content on the right all.
Right let's also add a box shadow so i'll just type box shadow and we'll set the values to 0 4 pixels 40 pixels negative 8 pixels rgba.
0 0 0 and 0.2 all right now the next thing we will do is we will style the tabs so here we can see we have this division with the class of tabs and in that we have all these individual tabs.
So let's tap tabs container tabs and the first thing we will do is we'll set the width to 300 pixels.
And let's set a background color of black and let's set the color of the text to white and let's set the text transform to.
Uppercase and we'll also text align it to the center right now let's style these individual tabs so.
For that let's tap tabs container tab or you can also type tabs dot tab and uh let's set a padding of 24 pixels top and bottom and 32 pixels left and right.
And uh let's set the background color of the tabs to two to two and let's set the cursor to pointer so that when we hover over this we have this pointer and we'll also set the font weight to.
Bold right now when we have an active tab we will have a different color so here we can see for the active tabs we have a light color so let's go back to our.
Index.html file now here we'll set the first tab as the default tab so for the first time i will also add a class of active so whenever we have the active class we will have a different color for.
The tab while we are still here we'll also add the active class to one of the content so by default we will add it to the first content so here we'll also add a class of active and we'll only display.
The content that is active right so let's go back to our style.css file and let's type tabs container tabs.
Tab dot active and let's set the background color of the active tab to f6f dff and we'll set the color of the text to a dark color.
So this is going to be the active tab all right now let's style the content so for the content we have a division with the class of content container so let's go over here and let's type.
Tabs container content container and we'll have a background color of f6fdfff and what we will do is we'll just.
Display the content that has the active class so here i'll just type tabs container content container dot content.
So here we can see inside the content container we have a division with the class of content and for the first one we have a class of active so by default for the content.
I'll just set the display to none and whenever we have the active class we will set the display to block so let's tap tabs container content container.
Content dot active and let's set the display to block and now we can see that the first content is displayed over here all right now let's go ahead and style the content.
So for the content we will have a padding of 32 pixels and now let's tile the s3 inside the content so let's tab tabs container.
Content container s3 and let's set the margin of the s3 to 0 and we'll also set the font size to 30 pixels and for the paragraph we will increase the line height so let's.
Tap tabs container content container and here we'll just type p for the paragraph and let's set the line height to 2 or that's it with the styling of the.
Vertical tabs now let's add the functionality using javascript so in the index.html file we have already linked our javascript.