Question

I’m using jQuery UI Slider and at each position of the slider it spits out a value in number (ui.value) so I want to show the div according to the number that is the position of the slider and hide all the rest.

Ex: if the slider is on number 4 show div #pos4

This is what I’ve managed to come up with and it works. My question is what can I do to make the code smaller/better?

JS

slide: function( event, ui ) {
   var pos = ui.value,
       off = $(".off");

   if (pos == 1) {
     $(off).hide();
     $("#pos1").show();
   };

   if (pos == 2) {
     $(off).hide();
     $("#pos2").show();
   };

   if (pos == 3) {
     $(off).hide();
     $("#pos3").show();
   };

   if (pos == 4) {
     $(off).hide();
     $("#pos4").show();
   };

   if (pos == 5) {
     $(off).hide();
     $("#pos5").show();
   };

   if (pos == 6) {
     $(off).hide();
     $("#pos6").show();
   };

HTML

<div id="pos1" class="off" style="display: block;"><br />STAR</div>
<div id="pos2" class="off"><br />Tech Expo</div>
<div id="pos3" class="off"><br />VisFest</div>
<div id="pos4" class="off"><br />ITL</div>
<div id="pos5" class="off"><br />Conferences &amp; Events</div>
<div id="pos6" class="off"><br />Instructional Support</div>

CSS

.off {
display:none;
}

Answer 1

Alternatively, you may want to try something like this:

    <div id="allpos">
        <div class="off"><br />STAR</div>
        <div class="off"><br />Tech Expo</div>
        <div class="off"><br />VisFest</div>
        <div class="off"><br />ITL</div>
        <div class="off"><br />Conferences &amp; Events</div>
        <div class="off"><br />Instructional Support</div>
    </div>

    slide: function( event, ui ) {
        var index = ui.value;
        $('.off').hide();
        $('#allpos').children(':nth-child('+ index +')').show(); //nth-child's index starts at 1
    };

It is a bit different than other ones, but 1 of good things about this is that you don’t need to create id attribute for each div.

More details about nth-child selector: http://api.jquery.com/nth-child-selector/