Toggle From Right to Left

Question

Using AlloyUI Toggler, is it possible to toggle a div from right to left, rather than the standard down->up? I've checked the Toggler API but can't find any kind of toggle direction.

Here is my current Toggler code:

new Y.Toggler({
    animated : true,
    closeAllOnExpand : true,
    container : '#mySearchForm',
    content : '.content',
    expanded : false,
    header : '.header',
    transition : {
            duration : 0.2,
            easing : 'cubic-bezier(0, 0.1, 0, 1)'
    }//always toggles from the bottom->up
});

Answer 1

To get the Toggler to toggle horizontally, you need to do 3 things:

1. Apply float: left; to all Toggler elements to make the Toggler horizontal.

2. Change animated: true, to:

   animated: {
       to: { right : '300px' }
   },
   

   Note: You may need to adjust the exact number of pixels.

3. Change Toggler to TogglerDelegate.

Here's a JSFiddle with all of that put together with your original code.

Check out the YUI Anim and Easing classes for more details on how to modify animations.