More efficient way to repeat jQuery function

Question

I have a recurring function in my code, which consists of a set of thumbnails that, when clicked, plays a unique video. The video is in a div that's toggled. HTML is included for reference:

HTML

<ul class="testimonialthumbs">
<li id="t1"><img></li>
<li id="t2"><img></li>      
<li id="t3"><img></li>
<li id="t4"><img></li>
<li id="t5"><img></li>
</ul>
<hr>
<div class="testimonialdrop" id="v1">
    <iframe></iframe>
    <hr>
</div>

<div class="testimonialdrop" id="v2">
    <iframe></iframe>
    <hr>
</div>

<div class="testimonialdrop" id="v3">
    <iframe></iframe>
    <hr>
</div>

<div class="testimonialdrop" id="v4">
    <iframe></iframe>
    <hr>
</div>

<div class="testimonialdrop" id="v5">
    <iframe></iframe>
    <hr>
</div>

JS

$('#t1').click(function(){
  $('#v1').slideToggle('fast');
  $('#v2,#v3,#v4,#v5').hide();
  });

$('#t2').click(function(){
  $('#v2').slideToggle('fast');
  $('#v1,#v3,#v4,#v5').hide();
  });

$('#t3').click(function(){
  $('#v3').slideToggle('fast');
  $('#v1,#v2,#v4,#v5').hide();
  });

$('#t4').click(function(){
  $('#v4').slideToggle('fast');
  $('#v1,#v2,#v3,#v5').hide();
  });

$('#t5').click(function(){
  $('#v5').slideToggle('fast');
  $('#v1,#v2,#v3,#v4').hide();
  });

What is a more efficient way to write the JS above? The end result is that when #t(n) is clicked, #v(n) will expand and every other #v(n) will collapse (if expanded). The default display: on #v(n) is none.

icktoofay · Accepted Answer · 2013-04-29 04:21:48Z

2

// Whenever a list item in .testimonialthumbs is clicked...
$('.testimonialthumbs').on('click', 'li', function() {
    // Extract the number.
    var index = $(this).attr('id').substring(1);
    // Hide all the other divs.
    $('.testimonialdrop:not(#v' + index + ')').hide();
    // ...and slideToggle ours.
    $('#v' + index).slideToggle('fast');
});

answered Apr 29, 2013 at 4:21

icktoofay

130k23 gold badges261 silver badges239 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kylesimmonds Over a year ago

This works great! Compared to the answer from @ArunPJohny, is there a better practice? I noticed they're similar, so would the biggest difference be page-load time?

icktoofay Over a year ago

@KyleSimmonds: I guess, but a few bytes won't make much difference.

Eli · Accepted Answer · 2013-04-29 04:24:26Z

1

You can use StartsWith selector along with each() to iterate over your li:

$("[id^='t']").each(function(index) {
    var i = index + 1;
    $(this).click(function() {
        $('#v' + i).slideToggle('fast');
        $('#v' + i).siblings("[id^='v']").hide();
    })
});

answered Apr 29, 2013 at 4:24

Eli

14.9k5 gold badges61 silver badges77 bronze badges

Comments

Sudhir Bastakoti · Accepted Answer · 2013-04-29 04:22:05Z

0

try

$("ul.testimonialthumbs > li").click(function() {
  var id = $(this).attr("id"),
      matches = id.match(/\d+$/),
      idnum = matches[0];
  $("div.testimonialdrop").hide();
  $("div[id='v"+idnum+"']").slideToggle('fast');
});

answered Apr 29, 2013 at 4:22

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-04-29 04:24:24Z

0

$('.testimonialthumbs').on('click', 'li', function(){
    var id = $(this).attr('id');
    var el = $('#v' + id.substring(1)).slideToggle('fast');
    $('.testimonialdrop').not(el).hide()
})

Demo: Fiddle

answered Apr 29, 2013 at 4:24

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

More efficient way to repeat jQuery function

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related