 Okay, once again continuing our tutorials on jQuery. Let's quickly review from last time If you look at our code over here, we have three div tags Each with their own IDs ID of my one my three my two my one by default The display is none which means it's hidden which is this two lines of text here We do see this header and this paragraph here as you can see over here Up here in our script in our head we have that we're loading up the jQuery script Which I showed you how to download in the first tutorial and then here We're saying find an element because it's got a dollar sign and parentheses the element in this case would be our document Once our document is ready meaning it's loaded We're going to run a function that function is going to find an element with that's a div tag with an ID You can see the pound symbol here meaning we're looking for an ID of the div tag And we're going to find the one with the ID of my two which is the down here the one that has the paragraph click me in it and Just as it says when you click that item, it's going to run another function that does three things it's going to Find the div tag with the ID of my one and it's going to fade it from wherever it's at in this case It's it's invisible. It's going to fade it up to 50% of its Brightness, I'm not sure if that's the correct term, but it'll fade it to 50% of its visibility over a three second period and then it's going to find the element of that has the div tag with the ID of my Three and it's going to fade it which is already a visible. It's already at a hundred percent It's going to we're not giving an exact number here. We're going to say slow to Point to which is 20% of its visibility Then we're going to find the element of this which is the element that was clicked in this case It's the div tag with the ID of my two and we're going to fade it out Completely over three seconds. So let's run that So as you can see that faded away completely this faded down and this faded in but only to 50% Today we're going to be looking at making elements Slide down and back up so what I'm going to do here is I am going to Delete that Div tag because I don't need it. I am going to remove it from our script here so right now we have Similar code as before we just removed one of the elements. Oh Refresh that did I save this There we go One fades out the other fades in to 50% but instead of fading in and fading out I'm going to remove the fade out so our click me button stays there and in fact, I'm going to move it So I'm just going to cut it and Paste it up here So it's on top Still have it so it's fading in the one thing we remove where it fades out and instead of Fading to we're going to change this to say slide down Once again, I'm going to just remove the options from within this function here. So now We start off. We have click me, which is our element inside our div tag here And we have set when we click that that it's going to find the other element and slide it down And it's not going to be that impressive right now But we'll do that and you can see kind of display things sliding down if we give a background color to our Div tag here using CSS It will make it a little bit more visible. So what we're going to do is we're going to say Semi colon here to say that we're working with a new little option for this CSS here. We're going to say Brack background dash color Colon and then you can give it a lot of different options here. I'm going to say light blue And I'll just give it a light blue color. It's going to be really ugly We're going to work with it here So there you go. You can see that it slides down It's kind of rough because it slides down more than needed and that's options. You can change in the CSS I'm not going to get Into that to really at all in this tutorial But just so you get the basic idea I click this it slides down So how do we make it slide back up? Well, we're going to add in another function here So after this function, we're going to say dollar sign parentheses So we're looking for another element in this case. We're going to say the Element that is a div tag with an ID the pound symbol meaning ID of my one Which is our object that's our element that's sliding down and I'm going to say dot Click so when that is clicked then we're going to run a function and What is this function going to do? Well, this function is dollar sign parentheses looking at an element again. We're just going to type this no quotations here Which means the element that was clicked so it's saying itself when my one div tag is clicked Then we're going to affect my div tag one Div tag with my one where I'm going to say slide up And you have the semi or the parentheses there and a semi colon now When I click click me Did I refresh this? Oh Got to put our close our little Function there with a parentheses and a semi colon now refresh over here Click here it slides down click that again does nothing because it's already slid down But if we click anywhere inside this blue box It slides back up once again It's kind of rough because it does the padding thing and that's something you would change with CSS that will look into more But I just want to give you the basic ID also This is just one way of doing this there's actually a toggle option Which we're going to be looking at in the next tutorial to where if you click click me it will slide it down If you click click me again, and it's already down It will slide up all in one command rather than making different functions for each thing and having to click somewhere else because normally you know You would have something that says click here to drop down. It would be a drop-down menu, so But that's the basics of this I Hope you're enjoying these tutorials. Please check out films by Chris calm. That's Chris of the cave for more information and Also, I hope you're enjoying these tutorials if you are like them Subscribes you don't miss any and just let me know what you think once again We're working towards not only doing web applications here, but we're going to be working with jQuery mobile, which is another group of JavaScripts built on top of jQuery to make web pages act like mobile applications for mobile devices So you can write something in the web browser that looks and feels like an actual application Running on your phone or tablet or in it will also run on desktop environments as well It's just more geared towards although there are parts of it that make it compatible with both anyway I thank you for watching visit films by Chris calm be sure to check out this entire playlist If you're jumping in here, you might be a little confused. Hopefully there's an annotation or a link in the description to the entire Playlist I thank you for watching and I hope that you have a great day