[jQuery] Apply Jquery Tabs to multiple elements on single page
Hi all,<div>
</div><div>I am using this handy tabs script from here:</div><div><a href="http://jqueryfordesigners.com/jquery-tabs/">http://jqueryfordesigners.com/jquery-tabs/</a></div><div>
</div><div>My problem is, if I try to use the same function for multiple elements on a page, seperated by a comma, it will only show one of the elements at a time.</div>
<div>
</div><div>I am guessing that is due to the "tabcontainers" function being applied to both elements at once.</div><div>
</div><div>Is there a way I can apply the tab containers function via "childof $(this)" or something along those lines, so I can use the single function for both elements on the page.</div>
<div>
</div><div>Would appreciate any advice.</div><div>
</div><div>$(function () {</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var tabContainers = $('#testimonials > blockquote, #recentNews > dl');</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>tabContainers.hide().filter(':first').show();</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>$('#recentNews ul a, #testimonials ul a').click(function () {</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>tabContainers.hide();</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>tabContainers.filter(this.hash).slideDown({fxFade: true, fxSpeed: 'fast' });</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>$('#contactForm ul a, #recentNews ul a, #testimonials ul a').removeClass('selected');</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>$(this).addClass('selected');</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>return false;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}).filter(':first').click();</div><div>});</div>