Jquery roller/toggle effect

I'm looking for a "roller toggle" in jquery (ideally using a plugin). I开发者_运维问答f I have the following HTML:

<ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
</ul>

I would like the first option to be displayed and the others hidden. Each time I "tap/click" on an option it displays the next and loops around to the first one after the last one. When used on a mobile web device I'd like it respond to swipe up/down events and appear like a "roller" (i.e. using a slide up/down effect). Too much to ask? Hopefully not, any pointers appreciated.

Thanks,

Paul

Here is a little sample to get you started if you wish to write your own plugin

It works on the principle of this sort of markup

<ul id="test">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
</ul>

Then this is the plugin code (pretty basic, but can be extended)

(function($) {   
    $.fn.roller =  function(){

        this.children(':not(:first)').hide();

        this.children().click(function(){
            if($(this).next().length>0){
               $(this).hide().next().show();
            }
            else{
                $(this).hide().parent().children(':first').show();
            }
        });
    };
})(jQuery);

That works on this idea:

1) Hide all but the first child 2) Clicking on any element hides that element and shows the next (unless the clicked element is the last in the list of children, in which case the first item is shown).

Finally the plugin is instantiated using this code:

$('#test').roller();

jsFiddle: http://jsfiddle.net/jamiec/zpq3u/

I think the control you're looking for is what's commonly referred to as an accordion.

There is one in jQuery UI: http://jqueryui.com/demos/accordion/

For special stuff like swipe actions, I think you'd have to catch them yourself and decide what to do with them. The jQuery UI accordion can be instructed to show a certain 'tab' like so:

$('#my-ul').accordion('activate', tabIndex);