jQuery slideToggle to a specific height using .on

Question

I need to do a simple slide toggle when an element is clicked, however the event needs to use the .on event and I also need to only collapse the element to a specific height, whilst allowing for any height when expanded.

In other words I can't figure out how to implement this: https://stackoverflow.com/a/4965021/162642

Into this:

$(document).on("click",'.SomeElement',function(e)
{
    e.preventDefault();
    // toggle here
}

Any help would be greatly appreciated!

Answer 1

Try this:

$(document).on("click", ".SomeElement", function() {
  if($(this).hasClass("toggled")) {
    $(this).animate({"height": "100px"}).removeClass("toggled");
  } else {
    $(this).animate({"height": "50px"}).addClass("toggled");
}