jquery - Applying .slider to hidden divs -

this kinda tricky explain,but here goes....i have multiple hidden divs swap 1 when clicking link using

$(document).ready(function(){   $('a').click(function () {     var divname= this.name;     $("#"+divname).show("slow").siblings().hide("slow");   }); }); 

i have made slider function works great, when div changes slider not work. how can target hidden div when called up? assume variable thing?

this slider code

$(function() { var scrollpane = $('#info'),     scrollableheight = scrollpane.height() - scrollpane.parent().height() || 0;  $("#slider-vertical").slider({   orientation: "vertical",   range: "max",   min: 0,   max: scrollableheight,   value: scrollableheight,   slide: function(event, ui) {     scrollpane.css({top: ui.value - scrollableheight});   } }); 

});

here working example better understand.....please excuse messy code

http://www.kerrydean.ca/tizzest.html#

thanks in advance

your slider set scroll #info div when set var scrollpane, , not other 2 divs (#info2 , #info3). instead give sliding divs shared class, such class="info" , set scrollpane so:

var scrollpane = $('.info'),     scrollableheight = scrollpane.height() - scrollpane.parent().height() || 0; 

then make sure set slider default position when showing/hiding divs:

$(document).ready(function(){   $('a').click(function () {     var divname= this.name;     $("#"+divname).show("slow").siblings().hide("slow");      // reset slider top     var max = $("#slider-vertical").slider("option", "max);     $("#slider-vertical").slider("value", max);   }); });