Question

I have a slider that moves between three slides, when they slides move their container changes heights to adjust to their height. Right now I only have the first two, when you click on the second slide the height changes correctly and then goes back to the old height and I can’t figure out why.

I have a JS Bin set up with the isolated issue. If you click the map it expands, and then click the 850 Boylston link you’ll see the issue. Any help would be greatly appreciated this is driving me crazy.

http://jsbin.com/unehul/2/edit

Answer 1

You need to correct one letter – d_Foxboro (capital F):

$( "#d_Foxboro" ).click(function(){
  $( "#location_slider" ).animate({
    "margin-left": -840
  }, 450 );
});

Also, each time you click on one of three menus the $("#directions").click(function() event fires. That results with having all slides setup as directed by function executed on $("#directions").click…. You could prevent that happen utilizing .unbind():

$("#directions").click(function() {
    window.setTimeout(directions_open, 450);
    $('#directions').unbind('click');
});