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.