Hello in this jQuery video I am going to show you the holiday in and showing effect. So first of all let's create some element. Any element you want you can hide whatever you want anything that you can select you can hide and show it was created there and say hello world. Also tunics pizza I love pizza. Okay, so we're gonna do is created for Tim on click this button he will you know hide it also button button button button. So going to have an ID and this is going to be hide button and I'm also gonna have one call Showing as well separate one.

And you can use the code that we trigger from the Highland show in any capacity that you like. Show it. So we get these two buttons at the moment, they obviously do not do a JavaScript file, we need to actually detect for that button click. So, select is a hash foil button, dot click, and there's gonna be a function callback. And here is where you actually hide it. So you need to select that element.

So let's say um, select audience. You can use any complex or basic selected one dot find. So if I copy this, paste it Oh, push show I'm gonna show now if I reload it, click Show does nothing for your to the elements. So to see what the portlet call, as it sees disappears what's happened. It's though the content still there in the DOM. But the fact you just had a display of nonsense apply to so that way, it's just not visible anymore.

If I click Show, it shows it in another method that you can use for how you didn't show in is the toggle method. So depending on the current state to do the opposite of is hidden, you show it if it's, you know, visible, a toggle button. I'll say toggle and knife or duplicate this so when the toggle button is clicked, it's like so and for reload, click that he just toggle between it's a perfect show The code toggle will just know exactly what's happening with it and you show it or hide it accordingly. One other you know, as a two other things I want to show you in relation to how you can show it. You can also pass in an optional speed parameter. So what you can do is I'm going to create two more buttons acting on my rifle first just to stay here, okay two buttons, and then a few different ways that you can acquire speed.

So, you there is a built in low speed low this will be fast So if I just detect the click of the button, if I just do slow, like so fast as well. This optional speed parameter can actually be supplied for the hide the shell all the toggle, I'm going to just apply for the toggle to the to the on and off as you can see both ways with less code. And all you do is with quotation mark the keyword slow until the keyword before I really I click slow, I didn't see it actually shows it and makes it disappear but it's quite slow. If you want it faster, you can do faster if you actually want to customize it and provide an exact value of how long it's going to take tuna hide show or toggle it can provide that as well and that will in milliseconds, so what we'll do, we will quickly write operation input.

First, we don't have to have an input, you could directly just have a value in code, but we'll make it a bit dynamic. So I'm going to say ID. And the idea is going to be due for the time, and this is going to have a type of text. And now afterwards, I'm going to have a button. And this button is going to be similar to the ID. It's gonna have custom speeds on say custom, custom speed button.

So If I reload it, you haven't been programmed in yet. But what will happen when I click this, whatever valleys in here will be applied to this in terms of toggling on and off again, this can be applied to just directly to the slot, I mean directly to the hide and show method. I'm going to keep us informed like that. And I'll actually even have a default value as well. And the value will be zero. So basically instant So, okay, so now if we, first of all, we want to say when the button is clicked, so don't click the when this is actually clicked, what we are going to do first we are going to get the parameter from the tongue So he's going to say var equals dollars and select that input and an idea of time to do dot Val to get the value of it.

And just confirm again, the correct value, simple console log. So if I reload it, go to console, click that. Didn't even detect the nothing that you printed out. So it says custom speed button. No hash. So he's trying to find the element called cost of the button but not more of an ID.

You print a zero as a 400. It prints off. Okay. Pretty cool stuff. Now, what we're going to do is do this exact line or almost this exact line and Instead of toggling like that will probably be totally with time. And now if we run it okay.

Okay, so what is happening here? So I believe what is happening by the looks of it because in unnaturally getting this value, and you say text value, it is you know failing. And if it doesn't accept a valid value, it just defaults to the slow method. So we want to pass the integer. So what we want to do is pause. Int now if we wanted to do it Now it's working nice getting an integer value instead of just a string, and I thought provide the value are pretty good.

You know, pretty fast. If I do 10 seconds, I think they, you know, it's trying to do it or wait till it's not completed. But if it is extremely slow, let's say for the 2000s of two seconds, I toggle it on and off. So that's how you highly show and toggle something. They you can also use a speed parameter the built in a little slow and fast, or you can use a manual one last. Luckily, the one last thing I want to show you, and it is this, you can do this with any of these whatsoever.

So what you can do once you've called a speed, you can provide an optional callback. So, you know, in a similar way, we've got here you can do that. So let's say which is doing after the comma after your speed. And I think function I'll do console dot log. Again, you can do what you want to have to be a console log on the say. Finished.

So far reload. Click that. I think they finished. But what happened if I do 1000? clicker? I think he took a little while for it to pay, it took a second.

So this callback is triggered. Once this toggle effect is our display. No particular hide show or toggle effect is finished. Once it's finished. This code inside is triggered. Obviously, you could call a normal function from the app.

This thing itself could be a function call. Does simple stuff. If you understand This concept, you're all good to go. If you have any questions, feel free to pop me a message. And as usual, I look forward to seeing you in the next video.