If i click on the second tab we have the content of that tab displayed over here and you can add anything you want over here as the content you can add images videos list or whatever you want and then we have another tab over here called comments and then we have the content of the comments displayed over here and this is also responsive so if i decrease the width of the screen and if you cross this breakpoint we can see that all the tabs are displayed in full width and if we decrease the width even more.
We have smaller headings for the content and also the font size of these are decreased so this is what we're going to design in this video now in the first video we'll just design it using html and css and in the next video i'll show you how to add javascript to add the functionality of these tabs so let's get started right here i have created this folder called responsive tabs and i just opened it with vs code and i also have this folder called images for this image right here.
And let's go ahead and start by creating the necessary files so let's click on new file and let's create an html file let's name it index.html and now let's create a css file let's name it style.css and let's also create a javascript file let's name it main.js now let's start with the index.html file now in vs code you have the shortcut where you can just press exclamation and press tab and you'll have this basic html5 code right let's link our css over here so let's type link and in the extra i'll just type style or css and here in.
The body i'll just link the javascript file so i just type script and in the src i'll just type main.js all right let's start with the markup of the tabs now the first thing we will do is we'll create a container division to hold everything so let's give it a class of tabs container and in that we will create a division of the class of tab heading container for all these tabs over here so let's tap tab heading container and that will have divisions with the.
And after that we need to type the text so let's go outside this division and let's type bookmarks right now we need to create another tab heading division so let's create a division with the class of tab heading and let's create a division for the icon right now let's go back to hero icons and we need to search for this icon right here now for that we can just type chart and here we can see this is the icon so let's click on copy svg and.
Let's go back and paste it over here and after this division we need to type the text so let's type analytics and let's create one more tab heading so let's tap tab heading and let's create an icon division and the next icon we need to have is this comments icon over here so let's search for comments we have this icon right here so let's click on copy svg and let's paste it over here inside the icon division.
And after that we need to have the text which is comments all right that's it with the tab heading container now let's create the content of the tabs so for that let's go outside this division and let's create a division of the class of tab content container and in that for each of the content let's create a division of the class of tab content and here let's create a heading and i'll just type bookmarks and let's create a division of the class.
Of content and here we'll just add all the content that we want so i'll just copy this text and let's create a paragraph and i'll just paste it over here now we want the first tab content to be displayed at the beginning so here we just add a class of active so when we have the active class we will display the content and here also for the tab heading for the first one let's add a class of active release scroll down and let's create one more tab content.
So i'll just copy this and let's paste it two more times and for the second one let's type analytics and for the content we can add an image as well so let's create an img tag and in the src i'll just type images forward slash and we have this image called analytics.jpg and let's also copy this paragraph and paste it down here now let's scroll down and here let's.
Posts Related:
Type comments and let's copy this and paste it down
Right that's basically with the html of our tabs now let's go to our css and let's start styling this before that let's open this in our browser and let's see how it looks so i have this extension called live server installed in vs code so once you have this extension installed you can just right click over here in the html and click on open with live server and here we can see that our design is being displayed over here now before doing anything else let's go.Ahead and decrease the height of these images so let's go back and let's go to style.css file and let's target the image so the image is inside this tabs container division and in that we have this tab heading and in that we have the icon division and in the icon division we have the svg so let's target that let's tap tabs container tab heading icon svg and let's set the height to.
Let's try 30 pixels and i think that looks alright right now let's start styling everything else so first of all let's bring everything to the center so i'll just target the body and let's set the display to grid and place items to center and let's set the height to 100 report height and we'll also set the margin to zero and now let's go ahead and style the tabs container so here we can see we have this main container division called tabs container.
So let's type tabs container and let's set the width to 800 pixels and let's set the height to 400 pixels and now we can see that it is in the center let's also set a font family of roboto and sans serif and we'll also add a padding of 16 pixels and let's set the background color to white and we'll also set the color of the text to 14213d and let's also add a box shadow so let's.
Tap box shadow and let's set the values to 0 5 pixels 50 pixels negative 8 pixels rgba 0 0 0 and 0.3 let's also have rounded corners so here let's type border radius and let's set it to 10 pixels now for all these elements let's set the box sizing to border box so that we have the correct height and width for all the elements so here i'll just tap tabs container and.
Also tabs container asterisk to select everything and here i'll start box sizing and set it to border box right now let's tile the tab heading container so we have this division with the class of tab heading container and in that we have all the tab headings so here let's tap tabs container tab heading container now we want all these elements to be one next to the other so let's set the display to flex and we'll set a background color of.
E6395 and now we can see we have all these elements one next to the other now here we can see we have added some padding for the tabs container so that's why we cannot move this tab heading container to the edge of this tabs container division so for that we need to add some negative margin so let's type margin and if we scroll up we can see that for the tabs container we have set a padding of 16 pixels so we have to set a margin of negative.
16 pixels now we can see that we have the correct width and let's also add border radius for the tab heading container so let's type border radius and let's set it to 10 pixels right now let's tile these tab headings so here we can see inside the tab heading container we have this tab heading division so let's type tabs container tab heading and for the tab heading let's set a padding of 12 pixels top and bottom and.
30 pixels left and right and let's set the cursor to pointer and let's set the color of the text to white and we also want to bring this icon to the center so let's type display of flex and align items to the center and we also need to set flex direction to column right now let's set the text transform to uppercase and let's set the font weight to 800 and we'll also add a little bit of gap.
Between the icon and this text so here let's type gap
Now let's set it to 4 pixels now for the active tab heading we need to have a different background color so if you go back to the html here we can see for the first tab heading we have set the class of active so here let's type tabs container tab heading dot active and let's set the background color to 1d3557.Now here we can see that this tab heading doesn't have the border radius so for that we need to go back to the tab heading container and here we have set the border radius so here we also have to type overflow and set it to hidden and now we can see that we have the border radius for the tab heading right now let's style the tab content so here we can see that we have three tab contents but we need to display just one of these tab contents so we have the active class over here so we need to display this tab content so let's go.
Back to our stylo.css file and let's type tabs container tab content and by default we will set the display to none and here let's type tabs container tab content dot active and here we'll set the display to block now let's go back and we have the tab contents displayed over here so let's go back to our html and.
Here we have added the active class to all the tab contents so let's remove all of these let's just keep the active class for the first tab content and now we can see that the first tab content is displayed over here now if i go back and remove this active class from here and if i add it to the second tab content and now if i go back we can see that the second tab content is displayed over here now we need to have a set height for this tab content and we also want it to be scrollable so here we can see if you go to this tab content.
We can see that we can scroll over here so let's do that let's go back and let's go to the standard css file and here for the tab content let's type overflow y and set it to scroll and let's also set the height to 300 pixels and now here we can see we are able to scroll now let's also position this correctly so here we have a lot of gap at the bottom and here at the top we can see that the text is also displayed over.
Here so we need to move this tab content down a little bit so let's add a margin top and let's try 30 pixels and i think we can decrease it a little bit let's try 24 pixels and i think that looks all right right now let's style the heading this paragraph and this image so let's go back and let's type tabs container tab content.
H2 and let's set the font size to 40 pixels and we'll remove the margin top and let's set a margin bottom of 8 pixels i think we can add a little bit of margin top so let's try 16 pixels and that looks alright right now let's increase the line height of this text so.
The text is inside the content so let's type tabs container tab content content and let's set the line height to 2 and that looks all right let's also increase the width of the image to 100 so let's tap tabs container tab content content img and let's set the width to 100 percent.
So now we can see everything looks all right now in this video we will make it responsive and also add the javascript to add the functionality of the tabs this is our source code and first of all let's add a breakpoint for 900 pixels so when the screen width is less than 900 pixels we will add some styles so this is basically for the tablet version so let's type at media and we'll set the max width to 900 pixels and when we are less than 900 pixels then we will set the width of the tabs.
Container so here we can see we have this division with the class of tabs container and by default we have set the width to 800 pixels we will set the width to 90 percent of the width of the browser so let's type tabs container and let's set the width to let's try 80 and now here we can see we have 80 width for the tabs container and if i increase the width of the browser window here we have 800 pixels of width but if we decrease the width of the browser window to less than 900 pixels then we.
Can see that we have a width of 80 percent of the browser window and we'll also position these in a different way so if we scroll up here for the tab heading container we have set the display to flex so let's scroll down and let's target that selector so let's type tabs container tab heading container and here we will set the justify content property to space between.
And now we can see all these headings are spread out now for each of the headings we will set the same width so let's target each of the headings so if you go back to the html file here if we scroll up here we can see inside the tab heading container we have these divisions with the class of tab heading so let's target that let's tap tabs container tab heading and let's set the flex property to one.
Now we can see all of these headings have the same width right now let's add one more media query for the smartphone version so for that let's tap at media and let's set the max width to 600 pixels and let me just decrease the width of this browser window and here we'll select the tabs container and let's set the width to 90 percent of the screen width and we'll also decrease the font size of.
This heading so let's type tab content so here we can see if we scroll down we have this tab content and in that we have the heading so let's tap tab content h2 and let's set the font size to 30 pixels and the font size is not being applied so let's scroll up and let's see what's the problem so here we can see we have set the font size to this selector so here we have a more specific selector we have tabs container and then we have tab content.
And h2 so we also need to add tabs container over here in the selector so let's type tabs container and let's set the margin top to zero or i think we can increase it a little bit let's try 16 pixels and let's set the margin bottom to eight pixels right now let's also decrease the font size of these headings.
So let's type tabs container tab heading and let's set the font size to 14 pixels and we'll also set the padding to 8 pixels or that's it with the smartphone version now let's go ahead and start adding the javascript to add the functionality so if you go back to our html file here we can see we have already added the link of the main.js file now in the main.js file we need to reference some of these elements from the html so we need to reference the tab heading.
So here we can see we have these tab headings over here and we need to add an active class to the active tab heading so here we can see by default we have set the active class to the first tab heading and we also need to reference the tab content so here we can see we have this division with the class of tab content and we need to add the active class to the active tab content so right now we have set the active class to the second tab content so i'll just delete this from here and let's add it back to the first tab.
Content by default so now let's go to our javascript file and let's reference those elements so let's tap const tab heading and we're going to select all the tab headings so i'll just type all over here you can name this anything you want all right let's type document dot query selector all because we're going to select multiple elements and here we will type tabs container tab heading.
Right now let's reference all the content so let's type const tab content and there are multiple contents so i'll just type all equals document.queryselectorall and here let's tap tabs container tab content right now we need to add event listeners for all these tab headings so let's tab tab heading all and there are multiple tab headings so we need to loop through all the tab headings so i'll just use a for each loop so just type dot for each.
And here i'll just create an arrow function and for each of the heading i'll just call it h and we also need to get the index of the headings so i'll just call it i so these are the two variables this is the heading and this is the index right now let's type h dot add event listener and let's listen for the click event and here also we'll create an arrow function now when we click on any of these headings we need to display the corresponding content so the index will.
Be the same for the heading and the content so let's type tab content all and in square brackets we need to type the index so just tab i because it is the same index dot class list dot add and we need to add the active class so let's tap active and now we also need to add the active class to the heading so let's type h which is the heading dot class list dot add and let's add the class active.
Right now let's test it out so let's click on the second heading and we can see that the second heading is active and we have the second heading displayed over here but we can see that it is displayed below the first content and we also have the first heading active over here so we need to reset the active state of the previous headings and content so let's create a function for that i'll just call it remove all active and first of all let's remove the active class from all the content so let's tap tab content all dot for each.
And let's call it c and here let's type c dot class list dot remove and here i'll just type active and let's do the same for the tab heading so let's tap tab heading all dot four is and i'll just call it h and here i'll just type h dot class list dot remove active and now we need to call the function over here in this event listener so here i'll just type remove all active right.
Now let's test it out so let's click on the second tab heading and we have the second content displayed over here and let's click on the third tab heading and we have the third content displayed over here so everything is working all right so that's basically how you can create responsive tabs using html css and javascript right here i'm in the dashboard of my blogger website now you can add this design into a post or a page i just added inside a post so let's click on new post.
And for the title i'll just type tabs design and here the first thing you need to do is go into the html view so first of all you have to click on this button and click on html view by default it'll be in the compose view so once you have gone into the html view you can go ahead and add the html css and javascript over here so let's add our code in this post first of all let's add the css so i'll just create a style tag and in this we will add the css so let's go.
To the source code and let's go to the style.css file and let's copy all the css from here now here we can see we have added some styles to the body as well that's because we wanted this design to be in the center of the screen so for the blogger website we'll just copy from this line of code so let's select from here till the end and let's copy all of this to our post so i'll just paste it over here inside the style tag and after that let's paste the html so.
Let's go outside the style tag and let's go back to our source code and let's go to the html file and let's copy all this html from here so let's start from here and we'll go all the way till this line of code over here and let's copy all of this html and paste it over here now here we can see in our html we have all the content of the tabs so you can go ahead and make the customizations over here so this is the icon so if you want to change the icon you can just add.
Your svg over here and this is the text of the heading so here we have bookmarks so this is the heading and these are the three tabs and then after that we have the content so we have this heading over here this is this heading right here and then we have the content you can just change the content to whatever you want you can also add images like we did over here if you scroll down this is the second content and here you can see we have added the image over here and in the same way you have the third content over here so you can make customizations as you wish.
Now the last thing we need to do is add the javascript so let's go back to our post and let's create a script tag for that and in the script tag we will add the javascript so let's go back to our source code and let's go to the main.js file and let's copy all this javascript from here and let's paste it over here inside the script tag now the last thing we need to do is change the url of the image so right now the image url is set to images forward slash analytics.jpg so we don't have this folder called images in our blogger website so we have to first of all.