Expand and collapse a div

Question

I have a list of items & they are holding images, each image is 800w x 600 H. The original div height is 800 W x 300 H. I figured out how to expand the div when it is clicked, but i want to know how to collapse it when you clicked it while it is already expanded. Right now i just expands the div even further

  $('.expand').bind('click', function() {
  var currHeight = $(this).css('height').replace(/px/,'');
  currHeight = currHeight * 1;
  var newHeight = currHeight + 500;
  $(this).animate({
     height: newHeight
  },1000);

 });

any idea on how to create an if else statement that would say, IF the div is already expanded then collapse on click, or if the div is collapse, then expand to # of px.

Answer 1

You can detect the current height and branch:

$('.expand').bind('click', function() {
  var $this = $(this),
      height = $this.height();
  if (height > 500) {
    height -= 500;
  }
  else {
    height += 500;
  }
  $this.animate({
     height: height
  },1000);
});

I've done a couple of other things in there. You can use height rather than css('height') to get the value without units, and no need for the * 1 trick. I've also done the $(this) once and reused it, since there are multiple function calls and an allocation involved when you call the $() function. (It doesn't matter here, but it's a good habit to get into provided you're not caching it longer than you mean to [via a closure or such].)

Alternately, you can remember that you've done it another way (using the data feature):

$('.expand').bind('click', function() {
  var $this = $(this),
      height = $this.height(),
      expanded = $this.data('expanded');
  if (expanded) {
    height -= 500;
  }
  else {
    height += 500;
  }
  $this.data('expanded', !expanded);
  $this.animate({
     height: height
  },1000);
});

Or combine those to store the original height in case it gets influenced by something else:

$('.expand').bind('click', function() {
  var $this = $(this),
      height = $this.height(),
      prevHeight = $this.data('prevHeight');
  if (prevHeight) {
    height = prevHeight;
    $this.data('prevHeight', undefined);
  }
  else {
    $this.data('prevHeight', height);
    height += 500;
  }
  $this.animate({
     height: height
  },1000);
});

Take your pick!

Answer 2

I would use CSS to set the height of the div in both original and expanded versions, and then when the div is clicked, toggle a class to change the height:

/* CSS for the height */
.expand {
    height: 300px;
}
.expand.expanded {
    height: 600px;
}

and then in the click method, just:

$(this).toggleClass("expanded");

Answer 3

Pure Jquery, check the documentation Jquery Animate

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      height: "linear"
    },
    complete: function() {
      //DO YOUR THING AFTER COMPLETE
    }
  });
});

Answer 4

You can check the .height() at the time of the click event and .animate() the height += or -= accordingly (something .animate() supports), like this:

$('.expand').click(function() {
  $(this).animate({ 
    height: $(this).height() > 300 ? "+=500px" : "-=500px" 
  }, 1000);
});

Or, use .toggle() , like this:

$('.expand').toggle(function() {
  $(this).animate({ height: "+=500px" }, 1000);
}, function() {
  $(this).animate({ height: "-=500px" }, 1000);
});

Answer 5

A few pointers with jQ:

.click(function(){})
.css({height: "300*1px"}) // Why are you multiplying Anything by ONE?!

And you can use

if($(this).css("height") == "300px") {
Do stuff
} else { 
Do other stuff
}

Edit: But other options above are far better.