I need to find prototype.js based slide out tab?

I have founded this -> http://www.building58.com/examples/tabSlideOut.html

But there are some reasons that i dont want to use it:

1. i need prototype framework instead of jquery
2. i need an image to open slider (click to 开发者_开发百科open) and when it opened image will change to "click to close"

Maybe someone has already the same solution of my question?

thank for you help!

CSS transitions were made for this sort of thing! For a demonstration of what you're looking for see http://jsfiddle.net/Fw7MQ/ (The 'handle' changes background colour but you could easily make that a background image instead)

The crucial parts of CSS are;

#drawer {
    position: relative;
    left: -200px;
    /* transition is repeated for all supporting browsers */
    -webkit-transition: left 0.5s ease-in-out;
    -moz-transition: left 0.5s ease-in-out;
    -o-transition: left 0.5s ease-in-out;
    -ms-transition: left 0.5s ease-in-out;
    transition: left 0.5s ease-in-out;
}
#drawer.open {
    left: 0;
}

The 'drawer' has a class name added or removed as necessary using this tiny javascript snippet;

Event.observe('handle', 'click', Element.toggleClassName.curry('drawer', 'open'))

...but you could dispense with even that if the animation was done on mouseover instead - change the CSS selector from #drawer.open to #drawer:hover.

For older browsers it degrades gracefully, the animation doesn't play but the drawer still appears in the right place.