Hello, in this jQuery video, I am going to show you sliding. So the slide effect essentially allows you to hide and show content. But when life is sliding into effect, and you mentioned to him, so let us know, click the slide down panel, it does nothing. It does nothing whatsoever. That's because we haven't programmed yet in the job before I collect some old code is to not pertain to this often get rid of it. And before it moves is displayed non temporarily.
This is what the content is and this is being hidden. And we are going to show it with a slide slide down. If we go to our JavaScript file, we are going to act when we are clicking the you know this panel right here. This has an ID of this panel. So on the panel, actually, let me change it to capital peers notice and come to that. Okay?
I know that's just a personal preference I that's the way I like my name. So when you click event has occurred you're going to call this function selectors and events if you're unsure about this, feel free to take a look at those videos. So we are going to now select what we want some use case is the element with that has an ID of flip dots slide down on learning Okay, I need to be updated There we go. Okay, so I see is not working so Why is it not working? So if interest thing very interesting Why did the work for click, slide down? Let me just reload the cap just in case.
That's the issue right there does not seem to be the issue again, no console errors. Specifically. I see what I did. I'm detecting click on the panel. And if the flip button, I'm gonna click click. And I know that needs to show.
No wonder the panel is in there and can't click it and that's not what we want. Okay, so click button. No on the slide deck, nothing much better. No flip flopping button and then reload. Again, to update it properly reload it, click it. There you go.
It's like that is really cool. Now we can, what we can do is also have a button to the say hide it. So what I'll do is offer actually something similar but all of it below it will be pretty interesting. So this is gonna be slowing down. Slow to slow down. Slow down.
Do the only one HTML I believe or do this for reload, we get two buttons and it's a messed up because it is no down on modified This is reason where a preprocessor like less or no staff really come in to really come in handy. So this is slide down. Make sure this is still working for you proceed for click it, it slides down, slide up doesn't work the moment. simple stuff, we copy it, paste it change, slide them to slide up so that the text slide up button clicked. And instead of putting slide down method to the slide of method for reloaded, slide down, slide up, as you can see, hiding and showing really cool stuff. There's one other method that we can have.
And for this, I'm actually just gonna have a simple button. I'm gonna say button He's gonna have an ID of a robot. So this can toggle depending on what the current state is. And this is great if you wanted a universal button, the height or the you know, slide up or slide down depending on your current state. So slowly toggle. And I just need to detect that click first.
So it's a slight toggle. And the method of income gasket is slide. And if I were to reload it, okay, as you can see, it toggles between the two states, we can still you know, use these as well. We're not you know, just limited to slow toggle. If you want a universal button to handle both with depending on its current state, that's how you do it. You can also provide an optional parameter for speed and also an optional callback to Be coordinators function to be called once the effect is finished on covering all of those in separate videos in more depth, so feel free to check them out.
If you have any questions as usual, feel free to drop me a message reach out and I will assist you. As usual. I look forward to seeing you in the next video.