Group Open Modifier

[00:00:00]
>> So one of the questions that we got kind of in the middle was we talked to that group open or peer open and close and what would you use that for. And I realized that there were some bonus things that we could talk about with that as well.

[00:00:16]
And so this is not something that we've prepared, but I think it could be interesting to kinda show some of the other Tailwind features that becomes super easy as well. So we're gonna go off script, we're gonna go off roading for a little bit, and we're gonna take that details things I use a few times to hide some of the solutions from you.

[00:00:38]
We'll add one of those and we'll put then the summary, is Open for More Information. Right, because a lot of times, I used to do this way back when with some JavaScript be is open, is closed, toggle classes on and off, I don't have to. So let's style this a little bit, we're gonna say class, we'll do bg, we'll give it, I like a nice light color in this case.

[00:01:13]
We'll give it that, and I think this is cool cuz you get to watch my thought process of something that I'm just live doing this. Let's see, we'll give it a px of 4 in this case and a py of 2. That looks good, I like rounded corners.

[00:01:29]
So I'm gonna do it, and I'm gonna give it a shadow as well. Dark background, you can't really see it, but it's there. I know it's there, that's the important part, and we'll give it a border-slate-100, right? Okay, got to give it the thickness of border, too. Those are for tables, don't look at those.

[00:01:55]
Those aren't for you, I will show you those later if you want to. Anything you want to see, show me a style table, we'll do it, I can get talked into anything. And so we'll give that 200. All right, cool, and so now this can, we gotta give it just some additional.

[00:02:13]
Actually, let me go back to this very long thing cuz that seems great. Cool, and we'll just use that. And so now I can open and close this thing. Let me give this a, Don't like that. Actually, I do like that, right, because I don't like that, and I only want that spacing when it was opened.

[00:02:44]
If only I had a way to tell if another element was open or close of whether I should show that margin, I was gonna come up with a different answer. This is great, cool, so let's do that. And then my suspicion is what I ought to be able to do is call this a group.

[00:03:07]
And then I should say, group-open, and I cannot tell you how many times the group and peer ones have saved my backend from something. Might have been hard, that isn't anymore. Okay, so the fact I still see it there is slightly not making me, cuz I have two mb-6s that will, okay.

[00:03:33]
So now we only get that margin on the bottom if it's open, right? That's pretty cool, the 6 feels a little much, so we're gonna tone that down just a teensy bit there, a little bit more than that. Cool, but I could also give it a peer. Right, and then theoretically, I should be able to say p, and let's say, class invisible like we saw before.

[00:04:04]
And we'll say peer open visible. And we'll say, This is a secret message, we'll give it, I don't know, teal. Right, so now we've got the peer, and so now we can have stuff that maybe wouldn't have happened maybe without a little bit of JavaScript involved before. We can kinda set everything up the way it might choose to be.

[00:04:36]
And so I can have that margin border only happen when it's open on the summary and then vanish. So I don't have that extra little piece there as well, and I don't necessarily have to think about it. That could be interesting, too. What I was gonna try to do is have the summary be a different color and have it have rounded borders when it's closed.

[00:04:57]
But then you can theoretically say, hey, the borders on the bottom, I want to make zero now, and it'll only do two, you can do one border if you want. You don't have to do rounded all the way around, you can kinda get a little bit more nuanced about it, I'll just show you that while we're here.

[00:05:12]
So I could say something like, Yeah, we'll say rounded, we'll just say t in this case. And now, you can see that these are now not rounded. And if you want to just do tr, right, you'll see that only the top right corner is rounded. So if you're trying to do a slightly more complicated layout, you don't have to think about a lot of these things, you can basically just pull some utility classes, tweak them.

[00:05:41]
And because you have the group and the peer, if I did want this to change on whether or not it was open or something like that, I could do that as well. I just got to see if I can, I got to know, we'll cut it if it doesn't work.

[00:05:56]
So we could do something like getting the borders exactly why not on a live coding extravaganza is probably, not our best, but let's go with it for a second. What we could do is to say then, when it is, Open, we're gonna actually say, and then when you are open, Then we'll say rounded-md, and then when it's open, we'll say rounded-none only on the b.

[00:06:34]
So you can kinda see that we can have it have been totally rounded. I gotta do a little bit of work there, you can see between the borders and all the rounding, there's a little bit of nuance there that we'd have to get totally right. We can kinda get, like when it's closed, we see it like that, when it's open, we get the secret message.

[00:06:53]
All of these things, I don't need any JavaScript for whatsoever, it's all CSS. It's all just kind of paying attention to what else is visible and not visible in the DOM and their pseudo selectors and their variants. And there was a whole class of problems that I just don't have to write code for anymore, right?

[00:07:09]
And now, I guess I have that checked selector, you can have a hidden check box and then the label and stuff along those lines. And you can actually have all sorts of things kind of turn on and off, open and close. With some of these just native DOM elements that are available these days, and some of these pseudo selectors, and it's pretty great.

[00:07:26]
Awesome, so yeah, some other things like menu items, stuff like that, there's a bunch of ways. There's a great way to get in any given newsletter on Hacker News is to build something that you think you need JavaScript without any JavaScript whatsoever, people love that.