jQuery changing height on click

Hey,

I have a function that is suppose to change the height on click. When I initially click it, the function goes through fine. But when I click it again to go back to the old height, it will not work.


$('#viewMore').click(function () {
      var position = 'up';

      if (position == 'up') {
        $('.statusSection .feedScroll').css({'height' : '400px'});
        position = 'down';
      }
      else {
        $('.statusSection .feedScroll').css({'height' : '200px'});
        position = 'up';
      }
});

Can anyone help please?

You’re reseting position = up at the begining of the function. Make position a global variable.

Yes, that variable scope is the main problem I see also.

I’d be tempted to use a shorter solution. Just set a class in the CSS named ‘big’, then use jQuery’s toggleClass() to toggle between the larger 400px height and the default height.

.big { height: 400px; }
$(document).ready(function() {
    $('#viewMore').click(function() {
        $('.statusSection .feedScroll').toggleClass('big');
    });
});

That is actually a good solution.