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!

You really should have a look at http://api.jquery.com/category/effects/sliding/ and read some before trying to do alot of magic, this will help you in the future, ALOT! — WeeklyDad, Mar 20 '13 at 11:45
True, however this is a one off thing. I don't tend to do *that* much jQuery. Shall take a look though. — rich, Mar 20 '13 at 11:47
You can't `click` and `slideToogle` on the same element. There's a phase when you have nothing to click. — , Mar 20 '13 at 11:56

score 6 · Accepted Answer · edited Jun 29 '15 at 11:43

6

Try this:

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

edited Jun 29 '15 at 11:43

Pixelomo

6,373
4
47
57

answered Mar 20 '13 at 11:58

bipen

36,319
9
49
62

I used this with some changes. – rich Mar 20 '13 at 15:46

jQuery slideToggle to a specific height using .on

1 Answers1