1

Estou criando um programa de pagamento de boletos para os clientes da empresa pagarem. O estilo é baseado no Material Design (estou utilizando o Framework MaterializeCss). Uso uma table para mostrar todos os boletos dos últimos 2 anos.

O problema é que terá um botão de "Mais detalhes" que clicando, uma área embaixo ira se abir, igual um Collapsible (para mostrar observações do boleto, uma área de texto simples). Mas não dá pra colocar um Collapsible dentro de uma table. Vocês já tiveram algum problema parecido, ou alguma forma de como posso fazer isso?

Código que fiz ->

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css/style.css"> 
    </head>
    <body>
        <div class="container-fluid">
            <div class="row valign-wrapper" style="background-color: #f3c71e;">
                <div class="col s2 m2 l2 valign">
                    <i class="material-icons" style="font-size: 30px;
    color: #ffffff;">menu</i>
                </div>
                <div class="col s8 m8 l8">
                    <h4 class="center-align" style="color: #ffffff;">Boletos</h4>
                </div>
                <div class="col s2 m2 l2 right-align">
                    <p style="color: #56b6c2;
    font-size: 16px;
    letter-spacing: 1px;">SAIR</p>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col s12 m12 l12">
                    <table class="bordered highlight">
                        <thead>
                            <tr>
                                <th data-field="id">Vencimento</th>
                                <th data-field="name">Número</th>
                                <th data-field="price">Ações</th> 
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>10/01/2017</td>
                                <td>1593574268-63214</td>
                                <td><i class="material-icons orange-text" style="padding-right: 15px;">open_in_new</i><i class="material-icons blue-grey-text" style="padding-right: 15px;">pages</i><i class="material-icons cyan-text">expand_more</i></td>
                            </tr>
                            <tr>
                                <td>10/02/2017</td>
                                <td>3571596248-47896</td>
                                <td><i class="material-icons orange-text" style="padding-right: 15px;">open_in_new</i><i class="material-icons blue-grey-text" style="padding-right: 15px;">pages</i><i class="material-icons cyan-text">expand_more</i></td>
                            </tr>
                            <tr>
                                <td>10/03/2017</td>
                                <td>5248631798-47928</td>
                                <td><i class="material-icons orange-text" style="padding-right: 15px;">open_in_new</i><i class="material-icons blue-grey-text" style="padding-right: 15px;">pages</i><i class="material-icons cyan-text">expand_more</i></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>

2
  • Amigo por favor adicione as imagens do layout que vc tem e como precisa. Coloque também o código do que vc já tem pronto para podermos ajudar da forma correta
    – hugocsl
    6/12/2017 às 13:04
  • @hugocsl aqui está as imagens Esboço inicial: goo.gl/R4nZGp Explicação do resultado final desejado: goo.gl/YiGoQX 6/12/2017 às 15:34

1 Resposta 1

0

Vc não precisa necessária mente colapsa nada, na verdade vc pode esconder ou mostrar o conteúdo. Fiz um código bem simples, as vezes te atende, olha ai.

  function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display === "block") {
          x.style.display = "none";
      } else {
          x.style.display = "block";
      }
  }
html, body {
    width: 100%;
    height: 100%;
}
table {
    height: auto;
    width: 80%;
    margin: 10px auto;
}
table, tr {
    height: 100px;
    background-color: #ddd;
    border-top: 1px solid black;
}
tr td{
    width: 25%;
}
tr:last-of-type {
    border-bottom: 1px solid black;
}
#myDIV {
    display: none;
    min-height: 100px;
    text-align: center;
    background: lightblue;
}
tr.esconde {
    height: 0px;
    border-top: none;
}
<table cellpadding="0" cellspacing="0">
    <tr>
        <td>texto</td>
        <td>texto</td>
        <td>texto</td>
        <td><a href="#" onclick="myFunction()">> Link Collaps</a></td>
    </tr>
    <tr class="esconde" >
        <td colspan="4">
            <div id="myDIV">texto</div>
        </td>
    </tr>
    <tr>
        <td>texto</td>
        <td>texto</td>
        <td>texto</td>
        <td>texto</td>
    </tr>
</table>

OBS: Precisa de um simples pra trocar a classe do elemento

Essa ferramente de incorporar o código aqui do Stackoverflow não mostrou as bordas do jeito certo, mas se vc copiar o código vai separar as <tr> direitinho

Fiz a adaptação com o código. Só inclui umas classes, vc vai precisar fazer um ajuste "pixel perfect" para as linhas separadoras ficarem perfeitas, nesse casso vc pode usar tr:last-of-type por exemplo.

#myDIV {
    display: none;
    height: 100px;
    text-align: center;
    background: lightblue;
}
tr.esconde {
    height: 0px;
    border-top: none;
}
tr.esconde td {
    padding: 0
}

A setinha no fim da que vai fazer o collapse, é só clicar

<tr>
    <td>10/01/2017</td>
    <td>1593574268-63214</td>
    <td><i class="material-icons orange-text" style="padding-right: 15px;">open_in_new</i><i class="material-icons blue-grey-text" style="padding-right: 15px;">pages</i><i class="material-icons cyan-text"><a href="#" onclick="myFunction()">expand_more</a></i></td>
</tr>
<tr class="esconde" >
    <td colspan="3">
        <div id="myDIV">texto</div>
    </td>
</tr>

OBS2: não esqueça o <script> , porém eu não manjo muito de JS e vc precisa de um script que funciona para múltiplos elementos, esse só vai pegar o elemento com o ID

2
  • Obrigado @hugocsl por ajudar na solução, eu me baseei pelo seu caminha, mas usei uma animação Jquery e um atalho com a função slideToggle. Obrigado! 6/12/2017 às 18:38
  • @GabrielMarinho isso ai jovem, que bom que deu certo!
    – hugocsl
    6/12/2017 às 22:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .