Slide left toggle

[Anonymous]

I want to toggle a div from its original position to the left and back again. I don’t want to use toggleClass because the amount it will move is based on the value of a variable. I tried jqueryUI slide() but that hides the element afterwards. This is exactly what i want to do but without using toggleClass, also a slide animation would be nice. http://codepen.io/anon/pen/noapi

[Alen]

http://codepen.io/alenabdula/pen/Jpnfv

[Anonymous]

Thanks but this isnt what im looking for. I need the element to move back to its original position when clicked again, Not continue.

[Anonymous]

I didn’t think such a simple and obvious effect wouldn’t be implemented into jQuery UI.

[Paulie_D]

I don’t want to use toggleClass because the amount it will move is based on the value of a variable

What variable?

[Alan C]

Modified the above JS slightly to make it go back. Does this help?

http://codepen.io/codingcarpenter/pen/xhHKe

[Paulie_D]

@Alan C

Yeah…but the issue is separating the two events into 2 functions based on clicking the object twice.

We used to be able to do this with .toggle but that’s be deprecated by JQuery.

Obvioulsy the quick answer would be to .toggleClass but, apparently we can’t use that because the offset amount is a variable.

Frankly, I’d like to see what the actual use case is because it’s not clear to me why a variable is required.

[Anonymous]

The element will move back and forth based on the width of the sidebar so it can reveal it. If the user were to change the sidebar width, the element that reveals and hides the sidebar will need to move back as much as the width so it can reveal it and hide it as well. the value of the variable that gets the sidebar width will also be the value for the element that reveals it. So the element will move back 500px if the sidebar is 500px wide, and it will move back 500px to hide it. and i need the variable because the user might want to change the width. the element moves back as much as the user changed the sidebar width.

[Paulie_D]

How would a user change the width of the sidebar?

Do you mean the sidebar is responsive?

[Alan C]

Maybe you could grab the container’s size when the user gives the command for it to retract? I just spent some time playing with it and it becomes convoluted after a little while.

Especially after the animation has happened and you have no way of getting your element back without either leaving a trace of it behind that doesn’t allow propagation or an external button/element with another function on it.

Super far from perfect but here is an idea of what I mean:
http://codepen.io/codingcarpenter/pen/okAEK/

[Author]

Posts