Hello, I'm wondering if there is a better method for the following solution. I would like to find a way to not have to repeat the same function over and over in jQuery. So for instance, I have a collection of hidden divs, and a collection of selectors below it to show the specified div and hide all the others.
<div class="youtube"> <div class="1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dignissim, est ut ultricies gravida, est leo euismod libero, ut commodo massa libero nec felis. </div> <div class="2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dignissim, est ut ultricies gravida, est leo euismod libero, ut commodo massa libero nec felis. </div> <div class="3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dignissim, est ut ultricies gravida, est leo euismod libero, ut commodo massa libero nec felis. </div> </div> <ul class="selector"> <li><a href="#" class="one">one</a></li> <li><a href="#" class="two">two</a></li> <li><a href="#" class="three">three</a></li> </ul> $(document).ready(function(){ $('a.one').click(function() { $('div.1').show('fast') .siblings('div:visible').hide('fast'); }); $('a.two').click(function() { $('div.2').show('fast') .siblings('div:visible').hide('fast'); }); $('a.three').click(function() { $('div.3').show('fast') .siblings('div:visible').hide('fast'); }); }); Is there a way to shorten the jQuery to just one function that works for each of those cases instead of having to repeat the function for each class name? Thanks!