Question

I’ve wrote a function which is working fine and all but when I try to reuse it on multiple html blocks with the same class, it breaks. I’ve tried to use the .next() and .closest() method but without results. Where do I apply these? The function is to recreate a <select> dropdown but by using a unordered list.

It is important that the classes and function stay the same as the list is generated by the CMS and can be multiple times a page, so having a solution where I change the code and call each function separate is not good..

Demos

Dropdown works fine (function works fine on one unordered list)

Dropdown breaks (when reusing function and html code)

Answer 1

This can be better.. Check out this fiddle

using toggleClass()

Fiddle