JQuery animate div's width onclick

Question

I have no idea why this doesn't work.

JQuery:

$("#foldit").click(function () {
    $("foldit").animate({"width": "165px"}, "fast");
});

Solution 1

Its because you have missed # in your selector.

Just try to use the this reference inside that click event to achieve what you want,

$("#foldit").click(function () {
    $(this).animate({"width": "165px"}, "fast");
});

As per your new requirement you can try like this,

$('#foldit').click( function() {
    var toggleWidth = $(this).width() == 165 ? "100px" : "165px";
    $(this).animate({ width: toggleWidth });
});

DEMO

Solution 2

You missed '#' in the selector and alternatively you can use it like this as well

$("#foldit").click(function () {
    $(this).animate({"width": "165px"}, "fast");
});

Solution 3

Use $(this) in the place of $("foldit")

Comments

[Shaul Bar-Lev]

Is there any way I can make it that when I click for the 2nd time it will change back to its original width?

[Rajaprabhu Aravindasamy]

@ShaulBar-Lev Try out my new update.

[Shaul Bar-Lev]

I get the concept but on my page it doesn't really work.

[Shaul Bar-Lev]

I click once but nothing happens, than on the 2nd click it runs.

[Rajaprabhu Aravindasamy]

@ShaulBar-Lev Can you make a demo of it.? so that we could fix your issue easily. :)

[Shaul Bar-Lev]

Nevermind, I worked it out myself. Last request: how to specify the animation's speed?

[Rajaprabhu Aravindasamy]

@ShaulBar-Lev you can replace that "fast" with some thing like "slow", "medium" or even you can specify the speed in milliseconds like 200 or anything.