Coding Challenge SOLUTION #4 - CSS-Only Tabs

Key Takeaways

so now hopefully you've attempted this yourself to make this tabbed content feature using only CSS and HTML now I'm going to show you how I made this and actually I said in the challenge video that there was a little hint you could glean from the way the address bar changes with different hashes when I click on the different buttons and that should hopefully have said to you that I'm using anchor tags to make these buttons and the href of these links is to a specific ID to Target other elements on a page and those elements are going to be the individual content panels so each one of these is going to have an ID matching the IDS that the links are pointing to and that's what we see up in the address bar and using this approach we're able to make use of a pseudo class in CSS to apply styles to any tag element that matches these IDs in the address bar so let's dive into the code and give this a whirl okay so the first thing I want to do is create the HTML for the these different buttons and panels so let's do the buttons first of all the things going across the top and there's three of them in total now each one is going to be an anchor tag and the href is going to point to a specific hash or ID on the page so I'm going to call this one details and then later on we'll create a panel down here with an ID of details so it's almost like this anchor tag is pointing to that content right and when we click on this anchor tag later on then it will basically make that specific panel the target of this anchor tag all right so let's fill this in we'll say product details for the first one and then I'm going to duplicate this couple of times the second one is going to be delivery and then we'll say delivery info right here and then third one is going to be returns and then down here we'll say returns info all right so that's the button it's pretty much done that's all we need to do dead simple now down here we also need three different content panels as well so I'm gonna do a div with a class of panel that's so we can style it later on but also of an ID right here of details so this ID right here matches this href okay so now inside here we can do some content I'll do an H3 first of all and then we'll say product details inside the H3 and then down here we'll do a paragraph tag and I'm just going to say like lorem 40 something like that okay so we have this particular panel right here which corresponds to this button and this points to this it makes this the target element when we click on this link and we're going to use that information later on when we style things so that we only show the particular element that's being targeted at that moment in time so what I'm going to do is copy this dude and paste it in a couple more times down here now we need to update the IDS to delivery and returns so the second one is delivery and the third one down here is going to be returns and also I'll do the same in here update the H3 so we'll say this one is delivery info and then down here this is returns info like so and then lastly what I'm going to do is just make it so the text is slightly different on each one as well so that we can see the change of text more clearly when we flick between the different tabs so let's save that now and preview it alright then so in a browser it looks something like this pretty cacky and if we click on these they're nothing really happens at the moment but later on it's gonna make one of these active or one of these the target rather and then we can style that differently so we show it and we don't show the ones that are not the targets okay for now let's add some style some basic ones to these things at the top and also these content panels as well all right so we're going to style these buttons first of all so this has a class of buttons right here so we can use that to grab these anchor tags in the style sheet down here so I'm going to say dot buttons first of all and we'll display that Flex just so that all of the different anchor tags will sit left to right even if we display them as block all right then so after that we'll say dot buttons a and inside here each of these is going to have a text color of dark gray 333 and the text decoration is going to be non to take away the underline then we're going to have a background to this which is why FFF and then after that I want to apply some padding so each one is going to have a padding of 10 pixels also each one is going to have a border of one pixel solid and then DDD which is light gray but I don't want them to have a border right or a border bottom because if each one has a border right and a border left then those borders are going to get squashed up together and it will look like a thicker border than the top and bottom so I'm going to say the border right is zero to strip that away and I don't want the Border bottom because the panels themselves they're going to have a border top and again if this has a border bottom and the panels also have a border top then it's essentially going to double that border so I'm going to say border bottom for this as well is zero finally I'll say Flex hyphen grow and set that to one so that each anchor tag takes up the available space and all of the buttons together take up 100 width of the tabs okay then so there is one button one anchor tag that I want to have a border right and that's the last one so what I can do is say dot buttons a and then use the last child pseudo selector and say border right and it's going to be one pixel solid DDD like so all right so now I also want to style the active state of these links right here and by active I just mean for the split second that we click down on them for that second they can be styled slightly different so what I'm going to do to do that is come down here and say buttons a and then active like so and in here we'll give it a background color so background it's going to be a variable and it's going to be this primary variable right here so this green so let me place that in here and also the Border color is going to be that as well so border hyphen color is going to be a variable and paste in that variable awesome and then finally the color of the text is going to be FFF all right so that's the tabs at the top done let's take a look at that so far all right so they look a little bit nicer and when we click on them the active pseudo class takes effect and we can see the green background and the white text awesome now at the minute although we're updating the address bar with those hashes if you like it's not having any effect on these things down here so we still need to solve that problem but first of all I also want to make these panel boxes a little bit nicer as well so down here I'm going to say dot panels and then get an individual panel so remember if we take a look at the HTML each of these has a class of panel inside the panel's div so we're targeting each one of those and each one will have a background which is white and also a border which is one pixel solid DDD light gray and then each one is going to have a padding of two pixels top and bottom 10 pixels left and right and I think that will pretty much do for now so let's just see what that looks like in a browser yep and that's looking a lot nicer now we need to implement that functionality so that initially these are hidden and only the active tab shows so whatever is up here then the ID that corresponds to that down here one of these panels that shows as well and if we switch it then it shows that particular panel and hides the others so we're going to use a pseudo class in CSS called Target to do that because remember I said when we click on something like that and this goes into the address bar this hash then whatever element has that ID in the page becomes the target element and we can Target that in the CSS as well and style that differently I.E we can show that one and hide the others so the way we do this is dead dead simple so by default we're going to say display none for all of the panels right and then we can come down here and say dot panels and we want a specific panel then use the pseudo class Target so whichever panel is currently the target then we want to show that one so display is going to be block for that particular one all right so if we click on delivery then that delivery panel becomes the Target and we display that as block but the others which aren't the target we say display non-fall and in a browser that seems to be working delivery is up here so this is the target element and it's showing if we change that to returns we can see it change down here product details yep deliver it yep everything's working awesome so there we go my friends that's how we can make tabbed content using only HTML and CSS no JavaScript included the only one that got you right here is that if we don't have this hash up in the address bar and we click enter none of them show so if you are linking to the page and you want one of these to show by default then make sure you add a hash in the link to that page which is the default tab so for example hash delivery [Music]