Checkbox Hack Practice

[00:00:00]
>> Jason Rodriguez: The main things you're going to be worrying about are inputs, labels, and then the content that you're going to be selectively hiding and showing. So I'm gonna walk through one of these examples before trying to get you guys to create your own interactive experience in an email.

[00:00:14]
So this is an Interactivity.html document up on the GitHub repo or in CodePen. So this what we're gonna be building. It's nothing too fancy. It's a really simple kind of slideshow type tool here. So we have these different slides. We have these buttons up here, and when you click on one of those buttons, it just swaps out that content.

[00:00:34]
So you can see we have Slide 1, Slide 2, Slide 3, just pretty easy. This could be adapted for something like a product slide or a product view where you have multiple products, and you wanna show those off, but you don't wanna have a product grid or something like that in your email.

[00:00:49]
So the way this works is by relying on inputs of some sort. Labels for those inputs and then the content that you are selectively hiding and showing, and we track that state, the different state, based on which input is tracked at that specific time. So if we were going to be doing this from scratch, we'll do a couple of things here.

[00:01:14]
I'm gonna clear out a lot of this content from our starter document just so it doesn't really get in the way and start fresh here. So we're gonna add a couple of things. We need the triggers for switching that content.
>> Jason Rodriguez: We need the content to be switched.

[00:01:39]
>> Jason Rodriguez: And then when we get up here, we're gonna have to worry about these different states and adapting styles and stuff. So let me just drop down here, and this will be our interactive elements that we'll add in there. So again, we talk about these triggers like the things that are going to be tracking that state and what those elements are.

[00:02:02]
While it's called the checkbox hack, you're more often going to use radio buttons, and the reason you do that because radio buttons only allow for one state at a time. You can't have multiple radio button selected at the same time. So you don't get into these weird issues where you have multiple states happening in your stuff, you have two things displayed at the same time or your layout breaks there.

[00:02:22]
So instead of check boxes, we're going to be adding inputs, type radio. We're going to make sure we have a name for those, in this case, we'll call them slides and then an ID for those, each these are gonna have a unique ID. IDs always need to be unique, and we're gonna start the first one to checked, that's gonna be our default state, is the slide1.

[00:02:45]
So we can copy that and paste it three times. We'll remove this checked attribute because only one can be checked at a time, and then we'll update these IDs so that they're unique. We have slide1, slide2, and slide3. So right now if we were to look at that, then we have these three different radio buttons, nothing fancy, but it gives us that input that we're going to be tracking.

[00:03:10]
But you don't usually want those radio buttons displayed, or you want to style them in some way. So usually, you're going to use something else to be the switcher for that content. In our case, it's going to be labels. So we're going to use three labels. We're going to tie them to those radio buttons so that they control the state for each of those.

[00:03:33]
So when one of this label is clicked, then it will make that input checked, and we are gonna give them classes. We're going to associates with this label here, so a label needs to be associated. We're going to use that for attribute and associate it with each input, so the first one would be slide1.

[00:03:51]
We want to do a couple of things like add a class which will come in later. We'll call this slide-label. We have it for that, and then we usually want to set a couple of different styles so that we know that it looks like a button, we have that border and stuff like that.

[00:04:08]
So we'll just add a border of, let's say, 2 pixels, solid black. Maybe make a display inline-black, so that they line up next to each other. We want a little bit of spacing between them, so we'll add a margin in here. Let's say 10 pixels, and then we want it to look like a bottom, so we'll use padding here on these elements too, give a some extra padding, so maybe something like that.

[00:04:38]
Open it up in a browser, we have this label here. It doesn't always say anything, so let's add some copy in there. We'll say slide1. And then we can do the same thing for each of the other labels, and then you're really just updating what this label is for so slide two, slide three, but they're all essentially going to be the same thing.

[00:05:03]
So we have our Slide 1, Slide 2, Slide 3. Whoops. That's add proper text in here. So you can see when we click on these, then it changes that state for which radio input is selected currently, and that's how we're going to control that state and selectively show or hide that content.

[00:05:26]
We need some content to actually display. So we'll add a couple of divs here. Just add a paragraph with some dummy copy there. It's nice to style this to see what's going on, so we'll make this.
>> Jason Rodriguez: We don't need to do the margin yet, maybe use a background color,

[00:05:54]
>> Jason Rodriguez: Just go over that content, maybe add some padding here, so it looks a little bit nicer.
>> Jason Rodriguez: So this might be that first slide there. It's not really doing anything. We'll add some other slides in here. But we'll,
>> Jason Rodriguez: Make it so it's a little bit easier to see each of these.

[00:06:15]
>> Jason Rodriguez: Sorry, I'm a nut with alignment in code. I hope everybody else is, too.
>> Jason Rodriguez: Let's make this a little bit more obvious, we'll use like red, blue,
>> Jason Rodriguez: And gold.
>> Jason Rodriguez: So we have these three content blocks, and that's all we want to be swapping out based on the state of our radio inputs.

[00:06:42]
So we need to be able to associate these labels with each of these divs of content, those specific slides. So the way we're going to do that is by using the general sibling selector in our CSS. First, I want to give these slides a class here, we'll do slide and slide1, and then we'll apply that across the other ones, too, just so we can target these.

[00:07:11]
Do some general styling and use that sibling selector to swap out that content, so slide2, slide3. Again, that doesn't change anything here, but It'll come into play a little bit later on. So then we're going to go up to our embedded styles and start adding all this interactivity.

[00:07:34]
So the first thing we wanna do though, is get rid of those radio inputs. We don't need to display them. So we're going to hide those inputs. Then after that, we're going to make those labels appear clickable.
>> Jason Rodriguez: That's easy enough to do. We'll see in a minute.

[00:07:54]
We're going to hide those other slides by default so that it's not displaying all three of those slides, and then we're going to Show the checked slides. So this all will just kind of scaffold out what we need to accomplish. So hiding inputs is super easy. We're just going to say input and display equals none.

[00:08:20]
Pop that open, cool. Those are gone. We just have these different buttons. You can't see it, but it's still updating that state of those inputs. So if we could see this, then Slide 2 would be checked right now, Slide 3 now, so that's cool. Let's make the labels look clickable, right now that cursor doesn't update.

[00:08:41]
It's not like a button or something that'll force that cursor updating. So we're going to say label, cursor equals pointer. And now we can tell that those are intended to be buttons, which is cool, it makes it a little bit more accessible. So then we want to hide the slides by default.

[00:09:00]
So we're going to say .slide was a class we apply to all three content sections. We're going to go ahead and say display none.
>> Jason Rodriguez: And then those go away. So now we don't see anything. We want to get those slides back, but we only want one at a time.

[00:09:18]
So the way we do that is by associating those content blocks with those different radio buttons and with those labels, and the way to do that is by using those IDs for the inputs that we set up. So we have slide1, we'll start with slide1 first, and then we want to use this checked pseudo class.

[00:09:41]
So we're seeing when that slide, when that input is checked, we want to display slide1, whatever that content is. And the way you do that is by using that tilde, the little general sibling selector and then target that slide1 class for that content. So when we do this, then we can say display equals black.

[00:10:03]
So since Slide 1 is checked by default, you saw that in that input radio button, they will trigger the display block of that div, that's the child of that general sibling of that radio button. Since the other ones aren't, they have a unique class name. It's not going to trigger those.

[00:10:24]
So all we have to do at that point is just chain those different ones. So we'll do slide, oops, slide2 checked. The general sibling of that, we want it to be slide2, and that'll make that display block. So now, when slide2 is checked, then that content displays, and the same thing goes for our good friend slide3.

[00:10:51]
General sibling selector and with that, we have a really simple content switcher. So there's not too much going on with it. Once you break it down to that checkbox hacks, it gets, I don't want to say easy, but it's hopefully easy enough to understand how that's working. You need to track state somehow.

[00:11:13]
So those radio buttons or a track box is how we track that state, we usually don't want to display those radio inputs. So that's where the labels come into play, and you can style those a lot better than inputs are usually stylable, to make those buttons or those different triggers that people can click on.

[00:11:31]
And then you need to associate the content that you're selectively hiding and showing with those labels and those inputs.