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 tap 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.
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 you 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 tap 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.
Posts Related:
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 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 tap 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'll 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 ease 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 will 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 type tab heading all dot for each 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 all right that's it for this video i will leave the link of the source code in the description and if.
You have any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for.