Como usar o Collapse

Preciso criar um efeito de collapse para os conteúdos de meus documentos e artigos. O Fluig Style possui informações sobre o uso mas não mostra como fazer passo a passo, como instalar as dependencias, enfim, não estou conseguindo fazer funcionar. Alguém poderia me ajudar?

collapse

criado 12 de Jul de 2017
Danilo Mazzulli
44 pontos
editado 12 de Jul de 2017

Anexos

index_collapse.html

collapse 1.png

collapse.png

Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

1 resposta

@Danilo,

Aqui nesse link explica como fazer:

https://style.fluig.com/javascript.html#collapse

Pelo que vi no seu HEAD, ele está assim:

<head>
    <title></title>
    <link href="/portal/resources/style-guide/css/fluig-style-guide.min.css" rel="stylesheet" type="text/css" />
</head>

O correto é assim:

<head>
    <link type="text/css" rel="stylesheet" href="/portal/resources/style-guide/css/fluig-style-guide.min.css"/>
    <script type="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/portal/resources/js/jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/portal/resources/js/mustache/mustache-min.js"></script>
    <script type="text/javascript" src="/portal/resources/style-guide/js/fluig-style-guide.min.js" charset="utf-8"></script>
</head>

Copie todo esse código e coloque lá:

<html>
<head>
    <link type="text/css" rel="stylesheet" href="/portal/resources/style-guide/css/fluig-style-guide.min.css"/>
    <script type="text/javascript" src="/portal/resources/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/portal/resources/js/jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/portal/resources/js/mustache/mustache-min.js"></script>
    <script type="text/javascript" src="/portal/resources/style-guide/js/fluig-style-guide.min.js" charset="utf-8"></script>
</head>
<body>
    <div class="fluig-style-guide">
        <form name="form" role="form">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="collapse-icon up" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                            Collapsible Group Item #1
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="collapse-icon" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                            Collapsible Group Item #2
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="collapse-icon" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                            Collapsible Group Item #3
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                        </div>
                    </div>
                </div>
            </div>

            <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
            simple collapsible
            </button>
            <div id="demo" class="collapse in">
                <h1>Apenas teste</h1>
                <input type="text" name="txt_teste" id="txt_teste">
            </div>
        </form>
    </div>
</body>
</html>

editar
- x
grosseiro ou ofensivo pouco construtivo obsoleto outro...
Motivo

criado 12 de Jul de 2017
Gabriel Franco da Rocha Nascimento
6500 pontos
editado 12 de Jul de 2017

0

Ola Gabriel, ele solicita a instalação de um plugin conforme informação abaixo: Plugin dependency Collapse requires the transitions plugin to be included in your version of Style Guide.

Como fazer esta atualização?

Simplesmente copiar o codigo e colar no fonte do documento ou artigo não está funcionando.
— Danilo Mazzulli 12 de Jul de 2017

1

Pode testar ele sem essa dependência que vai funcionar. Testei aqui em um Form e deu certo.
— Gabriel Franco da Rocha Nascimento 12 de Jul de 2017

0

Ele até funcionou, mas não abre os topicos 2 e 3... e o topico um não fecha.... o efeito de transição não está funcionando. Deve ser por causa que as referencias aos scripts java somem quanto salvo o documento. Tem alguma sugestão? Adicionei uma imagem collapse1.png.
— Danilo Mazzulli 12 de Jul de 2017

0

Como está estrutura HTML?
— Gabriel Franco da Rocha Nascimento 12 de Jul de 2017

0

— Danilo Mazzulli 12 de Jul de 2017

0

Complementei na minha resposta, está faltando referências no head do seu HTML
— Gabriel Franco da Rocha Nascimento 12 de Jul de 2017

0

Concordo com voce, mas quando insiro este trecho de codigo dos scripts o fluig limpa / apaga estas linhas mantendo somente "link href".... O que preciso fazer para manter o codigo dos caminhos dos scripts?
— Danilo Mazzulli 12 de Jul de 2017

0

Qual o procedimento que está fazendo? Está montando o formulário no eclipse e depois exportando ele para o Fluig?
— Gabriel Franco da Rocha Nascimento 12 de Jul de 2017

0

Não, estou editando direto no fluig através do menu documentos -> Novo Artigo ou Novo Documento. Ainda estamos utilizando tudo através dos recursos do Fluig e não Eclipse.
— Danilo Mazzulli 12 de Jul de 2017

0

Fiz esse mesmo procedimento que você, fui em incluir novo artigo e coloquei o HTML com os links do head que passei e deu certo. Qual versão do Fluig está?
— Gabriel Franco da Rocha Nascimento 12 de Jul de 2017

0

Estmos usando a Versão 1.6.0
— Danilo Mazzulli 12 de Jul de 2017

0

Adicionei um código na minha resposta, copie ele e coloque lá pra ver se funciona.
— Gabriel Franco da Rocha Nascimento 12 de Jul de 2017

0

Funciona quando eu publico a primeira vez. Se eu abrir para edição novamente, só o fato de eu editar o documento o fluig retira todas as referencias aos scripts.
— Danilo Mazzulli 12 de Jul de 2017

0
Fiz essa simulação que falou. Inclui um artigo com esse HTML e publiquei. (FUNCIONOU)
Depois editei e publiquei novamente. (DEU O ERRO QUE MENCIONOU).
```
```
Abra um chamado na Totvs sobre esse problema.
```
``` Uma alternativa contorno seria de toda vez que você editar colocar o HEAD novamente.
— Gabriel Franco da Rocha Nascimento 12 de Jul de 2017

1

Sim, já pensei nesta solução também... vou providenciar um chamado na Totvs... obrigado!
— Danilo Mazzulli 12 de Jul de 2017

Mostrar todos os 15 comentários>

fluig forum

Como usar o Collapse

Comentário

1 resposta

Comentário

Não é a resposta que estava procurando? Procure outras perguntas com as tags collapse ou faça a sua própria pergunta.