Question

I have a div that I’d like to animate to 3 different heights depending on the click element. I had wanted to do it with classes, so if one of the clicked elements, a div named d_foxboro is clicked and it has a class of height_one the location_slider is aniamted to the first height, if another div is clicked, d_main and it has a class of height_two then location_slider is animated to teh second height, and so on.

$( "#d_Foxboro" ).click(function(){
$( "#location_slider" ).animate({
"height": 500
}, 450 );
});

Answer 1

$( "#d_Foxboro" ).click(function(){
    var height = 0;
    if($(this).hasClass('class1')){ 
       height = 400; 
   } else if($(this).hasClass('class2')){ 
       height = 500; 
   } else if($(this).hasClass('class3')){ 
       height = 600; 
   }

   $( "#location_slider" ).animate({
       "height": height
   }, 450 );

});

Basically, use hasClass to see which class your element has, then set the variable which contains your height depending on the class