I've realized that my solution using the jQuery animation works great in the browser on the computer but when I tested on an actual mobile device (iPad, iPhone) it doesn't work well at all. What I've done, is found a much better method that is in the Kendo framework, kendoToggleClass(). This method switches the class to whatever element (in this case, the view/pane you want to collapse) and in that CSS class you identify what it needs to collapse (width, position, etc). The method then automatically also uses CSS3 transitions to animate the CSS change. When the method is called again, it toggles back to the original style, also animating it by CSS3 transition.
The result is a very smooth animation on devices such as the iPad and iPhone, where jQuery animate was not giving me this smoothness.
On my button I'm assigning its click to the function toggleClick:
Then the function is calling Kendo's ToggleClass:
Then you also have to have your CSS classes setup with the appropriate styling:
It works great and works in Safari, Chrome, Firefox, etc. Most likely will not work in IE. Works GREAT on Apple devices.
For those familiar with the Facebook iPhone app, where the news feed slides out of the way to expose the left-hand menu, I have created the exact same "functionality" in my app using Kendo Mobile with the kendoToggleClass() method.