Question

I’m just starting out with jQuery and I’m working on a mobile web site which has multiple drop down elements (forms, lists, carousels etc.) on the same page. For getting multiple drop downs I used Andy Langton’s code snippet.

The dropdowns work just fine but they append the drop down links (plus and minus signs) at the end of the previous element. What I’d like to do is make the entire element itself clickable (in this case a header). Is there any way to do so using this snippet? The code can be seen here.

Any advice would be greatly appreciated. Thanks!

Answer 1

This works!: http://jsfiddle.net/yQme5/27/

You (almost) only have to change the click event and put it on $('.hdropdown') instead of $('a.toggleLink') and when you change the link depending on whether the element is shown or hidden to change, modify:

$(this).html( (!is_visible) ? showText : hideText);;

to

$(this).find('a').html( (!is_visible) ? showText : hideText);