Make it completely css based so we just remove all the javascript and make it html and css based so let's get started right here's the source code and the.
First thing we need to do is we need to create radio buttons for the tabs so we're going to change these tab headings into radio buttons so that we can click on one of these tabs at a time.
So let's go ahead and create input fields so i'll just type input and for the type we will set it to radio and we'll also give it a class of tab radio.
And we also need to give it an id so let's set the id to tab one and we will have the first tab checked by default so let's type checked over here.
The id to tab 2 and tab 3 and we'll just remove the check from here we just have the check for the first radio button so if you go back to our design we have.
Three radio buttons over here but we cannot see it clearly because of these tab headings over here so let's go back and let's change these divisions into labels for the input fields so let's.
Change this to label and we'll have the class as tab heading and if you scroll down here we have the ending tag as label we'll do the same for the other tab.
Headings as well so let's change this into a label and let's do the same for this division so let's change this into a label now we also need to add a four attribute for.
These labels so for the first label we need to add a for attribute and we need to set the value to the first id so here we can see for the first radio button we have this id of tab one so here we have.
Posts Related:
To type tab one and in the same way
Let's go to the second label and here we need to type four tab two and in the same way for the third label.We need to type 4 tab 3 and now let's go back to our design now here we can see we have these radio buttons displayed over here.
And if i right click over here and click on inspect here we can see these are all labels now here we can see that all the radio buttons are active we need to just have.
One radio button active at a time so for that let's go back to our code and we need to add a name attribute for that so let's type.
Name and we need to add the same name for all these three radio buttons so let's add a name of tab heading i'll just copy this and let's paste it down here and here as.
Well now if you go back to our design and if we click on the second tab heading we have the second radio button selected and if i click on the third tab.
Heading we have the third radio button selected so we have just one radio button selected at a time now the next thing we will do is we will.
Remove the javascript so let's scroll down and here we have the link for the javascript file so i'll just remove this line of code i'll just comment this.
And if you click on any of these tab headings nothing happens because the javascript is removed and the next thing we will do is we'll remove the active classes from all these elements.
So here we can see for the first tab
Content we have the active class so i'll just remove that and here for the first tab heading we have this active class let's remove that.As well now we can see that the content is not being displayed and we also don't have the background color for the active tab heading so let's fix it right now so.
Let's go back to our style.css file and if you scroll down here we can see that we have this active class and here we are adding a.
Background color so what we need to do is we need to check whether any of these radio buttons are active or checked and if the radio button is checked then we need to add.
This background color so for that let's remove this selector from here here we will type tabs container and then we need to add the radio button.
So for the radio button we have a class of tab radio so let's type dot tab radio and then we need to type colon nth child.
And we'll select the first child over here so this will select the first radio button and here we need to check whether it is.
Checked so let's type colon checked and now if you go back to our html file here we can see that we have this division with the class of tab heading container and in that we.
Have the tab heading division now we have to select this division over here and for that we need to use this tilde symbol over here you can find this key right below the escape key on the.
Keyboard and then we need to add the name of this division which is tab heading container so let's type dot tab heading container and in that we have and in that we have.
The tab heading division and we need to select the first tab heading so here we can see there are three tab headings so we need to select the first tab.
Heading so for that we need to type colon and child and here we need to type one and now if you go back to our design here we can see that the first tab.
Heading is active and if i click on the second tab heading the first one is not active anymore so let's do the same for the other tab headings as well.
Let's go back and let's copy this code from here and let's paste it two more times and here we'll just change this to two.
And for this one let's change it to three now let's go back and now we can see that everything is working all right now we'll just hide.
These radio buttons from here so here we just type tabs container tab radio and let's set the display to none right now it's time for us to add the.
Content so let's go back and here we can see we are adding the active class to the tab content so i'll just delete this from here and here we need to do almost the same.
Thing as this selector right here so we need to type tab radio colon nth child of one and tilde symbol and here before that we need to type colon checked.
So this will only apply for the active radio button now if we go back to the index.html file here we can see we have this division with the class of tab content container.
And in that we have the tab content so let's type tab content container and in that we have the tab content and here we need to select the first tab content so let's type colon and child.
One and we need to do the same for the other tab contents as well so let's copy this and let's paste it two more times and here i'll just change this to.
Two and we'll just change this to three and now if we go back to our design we can see that the first content is displayed over here and if i click on.
The second tab we have the second content displayed over here and in the same way we have the third content displayed over here so everything is working all right now.
All of this is working without any javascript we are just using css let's also check the responsive version so the responsive version is also working all right.
So that's basically how you can create responsive tabs using pure css now adding this to your blogger website is really simple i'll just show it to you real quick so let's go to the blogger.
Dashboard and here i already added the design of the javascript version so if i click on this post here we can see the code i have already explained to you how to add this in the.
Previous video i will leave the link in the description of this video now here we need to make the changes to our tab heading so let's go back to our code and let's go to the index.html file.
And let's copy everything from here till here and let's paste it over here.
And just delete everything from here till here just before the tab content container starts.