 Okay, continuing with our jQuery tutorials here. Quick review of last time. We have an element here. We have two div tags in our script, in our code, that one has an ID tag of my1, the other one has an ID tag of my2, my1 is invisible, but when you click my1 it slides down as you can see here. And if you click the element that slid down, it slides back. Now we're going to, one, fix this little issue here. See how it kind of jerky it slides down? Then we click it, it kind of gets big and then slides up. That's because we haven't set any CSS for the padding of that element. So if we come down here, the element that's sliding in and out is the div tag of my1. And it doesn't matter where you put it here inside the style, but I'm just going to say padding colon 50, semicolon dividing up. So I tell you, you should already know some CSS for starting this, but the semicolon divides up each of these little options for the element. And then there's a colon that separates what we're changing and how we're affecting it. So padding to 50. So it's going to put more padding around our element here. So if we refresh now and we click this, oh, be good if I saved this, and then refreshed over here, you can see that it didn't change anything. Oh, yeah. Not just 50, you have to give it 50 px, which I believe stands for pixels. There we go. We'll refresh over here, click this. And as you can see, there's more padding, but it's a smooth slide. There's no changing of size before and after it moves. So definitely it looks better already just adding that. But we have, right now, where we click, click me, and then we have to click in here, because click me, if you click, click me again, all it's set to do is slide down, and it's already slid down. What we're going to do here is we're going to set a toggle. So we're going to go up here, and we're going to delete this function here altogether. So just delete those three lines. And up here, when we click the element of my2, or the div tag with the id of my2, we're going to run a function, and that function right now just says slide down. But what we're going to do is we're going to change this to just say toggle. And if we toggle it now, or we click it now, now we can click, click me, it appears, click it again, it disappears. So you can definitely make little menus and other objects appear very simply with a button. In this case, we're using a div tag, but we can also use a button. But whatever element you want to toggle it in and out. But we can also make it a little bit nicer by changing this. Instead of saying toggle, we're going to say slide, and then capital T for toggle. It is case sensitive. We're going to save that. And now, once we saved it, refreshed it, it slides in, it slides out. Slides in, slides out. So let's review here what we've done today. We added in some more styling. We added in some padding of 50 pixels around this div tag elements. So basically, as you can see, there's more spacing of blue around the elements inside at which are these words here. So once we add that, that got rid of our little jitteryness of the toggling. Up here in our actual script, don't forget we've loaded up jQuery. So down here, we're using the jQuery script. We're calling functions from it. So you have to make sure you have that downloaded and you're linking to it up here. And then we're going to say our script here. Once again, anytime you see a dollar sign and parentheses and you're using jQuery, that's saying that we're looking at a certain element. This first line here is saying we're looking at the document element, which is our entire web page. And we're going to wait until it's ready, wait until it's done loading, because you don't want to start manipulating it until it's done loading. Then we're going to say run a function. This function is going to look for an element. It's going to look for a div tag with an ID. We know it's an ID here of the pound symbol, number symbol, the little tic-tac-toe looking thing, saying we're looking for an ID of my2. So that would be this right here. It's a div tag with an ID of my2. We're saying anytime you click anywhere inside that div tag, click, we're going to run a function. That function is going to find an element, in this case, this element. Once again, it has the pound symbol here. So we're now looking for an ID of a div tag. And in this case, it's saying my1. You can see that right here. So that's referring to everything inside these div tags. And what we're going to do is we're going to use the slide function, but not just the regular slide function. We're going to use the slide toggle function. So it toggles in and out. That way you don't have to create a function that checks is it down. If it's already down, then go up, check if it's up. They've already already done that. They've already done that for you in the jQuery function of slide toggle. You can also, just like the other slide option, put in here something like five seconds. So the delay is 5,000 seconds. We click that, and you can see it will slowly slide in and slowly slide out over a five second period. So you can definitely tell it the speed that you want for the element to slide in or slide out. So that's about it. We are going over toggling with the slide in, slide out, and with the speed of it. So I thank you for watching this tutorial. I hope that you enjoyed it. I hope you're enjoying all these jQuery tutorials. Be sure, if you haven't, watch the entire playlist. There hopefully is an annotation. If I've forgotten, please someone comment and let me know. An annotation or a link in the description to the entire playlist. And this is just a build up to not just using jQuery, but we're going to work with jQuery mobile and making mobile web applications for your devices, such as tablets, cell phones, and even desktops. So I thank you for watching. Once again, visit Films by Chris. That's chriswithk.com. There's a link in the description. And as always, I hope that you have a great day.