Single Function to Handle Multiple Elements at Same Page (this, closest, find, stop, execute)

How to use single function to handle multiple elements at the same page in jQuery? My technical manager asked me to create a toggle functionality. I created it right away. But it was good for one element. If I took copy of that code block and looked at result, both code blocks were responding to one click. I could not use multiple toggles for that function at same page. In this video we are fixing that.

Only clicked block should be toggled, and not the other. The issue was because we targeted generic classes and did not took into consideration which block was triggered at first place. There should be a control to identify which block was triggered and only that block should be toggled or respond to click.

This tip is not just for toggle. Whenever you create something, make sure you keep in mind that there may be copies of that code block. For example you may need more than one toggle or accordion or something like that on a single page. Only that thing should respond to click that was triggered and not its copy or duplicate. This is very important lesson.

We will use jQuery document ready to call our function. Outside that we will write that function. In this example following methods and keyword play important role.

- 'this' keyword
- jQuery closest
- jQuery find
- jQuery stop (I forgot to mention it)
- jQuery toggle
- jQuery slideToggle

When we click at title of our card, by using 'this' keyword we get only that element which was clicked. Then we grab its closest outer element that is toggle-wrap and we find toggle-area inside it. Then we toggle it. After find you can use jQuery 'stop' method for precaution.

Remember this keyword, closest and find in jQuery. Use these to lock an area and do something only inside that area. It will not affect other similar elements at the page. Only current block of code will respond to click in this technique. And this is how you overcome this issue. By using this technique, you can code functionality once and apply it for multiple elements at same page.

!!! I forgot one thing to mention in this video. If your function is repeating or going in a loop before stopping, use stop jQuery method 'stop()' after you use 'find()' jQuery method. Chain it after find() and you will be good.

Here is stop() method

✅ How To Hide / Protect JavaScript Code - Techniques and Tools
✅ React JS UNDEFINED Solution | Reactjs Learning | Learn ReactJS & JavaScript Debugging Fast
✅ Calculate Sum or Total from Values in Array & Array Object | Learn JavaScript | Reduce Method
✅ Get URL Parameters in JavaScript | URLSearchParams
✅ DIV to PDF, Iframe to PDF using JavaScript Only (with CSS & Images Support)
✅ How To UnMinify JavaScript Minified Files Easily | Decrypt Complex JavaScript Code
✅ Toggle Class in Vanilla JavaScript | Learn JavaScript
✅ How to Execute a JavaScript File by using NPM
✅ Get User's Location (Country, State, City) with Free Unlimited API Access | PHP & JavaScript
✅ Replace jQuery with Vanilla JavaScript Code Easily | jQuery vs JavaScript
✅ Toggle in Vanilla JavaScript
✅ MINIFY JAVASCRIPT FILES & FOLDERS in Multiple Ways (Command Line & Code Editor)
✅ JavaScript vs jQuery | Difference between JavaScript and jQuery
✅ JavaScript Variable Redeclare & Reassign | VAR vs LET vs CONST | Practical Examples

Thank You!
Channel Support
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#jquery #javascript #webdevelopment #js #webstylepress #functions #methods

[webstylepress]

To watch more related videos, please LIKE, SHARE & SUBSCRIBE! WebStylePress needs your support.

[camilogarcia]

Thanks for the tuto but how can make it boolean, starting false and when it clicked turn to true?

[krunalkaneria]

Thank you much man. You are my :) :) :)

[sheezanawaz]

but i want this with javascript not jquery