Finalmente resolvi migrar de Rails/Prototype para Rails/Jquery com o plugin JRails. E migrando uma aplicação que estou trabalhando acabei decidindo em parar de usar o Spry também e usar tudo em JQuery… eu sempre usei alguns widgets do Spry como Collapsible Panel, Validações e etc … mas resolvi usar só JQuery agora, em virtude de seus milhões de plugins e de ser leve.

Neste processo de migração esbarrei na necessidade de criar um collapsible panel em JQuery e não achei nenhum plugin… então resolvi o problema com as linha abaixo:

Marcação em html necessária para nossos collapsibles:

<div id="calculations_panel" class="collapsible">
    <div class="collapsible_tab">Titulo 1</div>
    <div class="collapsible_content">
        <p> Olá pessoal, eu sou um collapsible panel !!!</p>
        <p> Olá pessoal, eu sou um collapsible panel !!!</p>
        <p> Olá pessoal, eu sou um collapsible panel !!!</p>
    </div>
    <div class="collapsible_tab">Titulo 2</div>
    <div class="collapsible_content">
        <p> Olá pessoal, eu sou um collapsible panel 2 !!!</p>
        <p> Olá pessoal, eu sou um collapsible panel 2 !!!</p>
        <p> Olá pessoal, eu sou um collapsible panel 2 !!!</p>
    </div>
</div>

E agora nosso Javascript… importe o jquery em seu head:

<script src="/javascripts/jquery.js" type="text/javascript"></script>

E coloque o código abaixo em um em um arquivo separado e importe-o ou coloco no final de seu html ( pode colocar no topo também, mas javascript, sempre que possível deve estar no final de seu HTML ).

function collapsible(){
    $(".collapsible_tab").map(function(){
    if (!$(this).hasClass("open"))
            $(this).next(".collapsible_content").hide();
  });

    $(".collapsible_tab").click(
        function(e){
            var content = $(this).next(".collapsible_content");

            if (content.is(':visible')){
                content.slideUp();
                $(e.target).removeClass('open');
            } else {
                content.slideDown();
                $(e.target).addClass('open');
            }
        }
    );

}

Feito isso você vai precisar chamar a função collapsible() para inicializar todos os seus collapsibles da tela… basta adicionar isso no evento ready.

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () { collapsible(); });
    </script>

Agora vou poder reutilizar esse collapsible na por toda minha app.

Se alguem tiver sugestões sobre alterações no código do collapsible posta aí no comentários porque não sou nenhum expert em JQuery ainda, e deve ter passado algo que pode ser otimizado.

Veja o exemplo rodando abaixo: