0

Estou tentando fazer uma tabela com collapse, porém acontece que ao clicar no botão o collapse mostra, porém ao tentar esconder, ele simplismente não funciona.

inserir a descrição da imagem aqui

Código HTML

<tr>
    <td>
        <input type="checkbox" name="chck" id="chck" class="filled-in chk-col-teal">
        <label for="rememberme">Título</label>
        <div class="collapse" id="collapseExample">
            <div class="well">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica,
                craft beer labore wes anderson cred nesciunt sapiente ea proident.
            </div>
        </div><!--  faltou esta div -->
    </td>
    <td style="width:20px">
        <button class="btn bg-cyan waves-effect m-b-15" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Detalhes
        </button>
    </div>
    </td>
</tr>
7
  • Confira aí. Faltou fechar a tag DIV
    – Tony
    20/06/2018 às 13:24
  • @Tony não funciona msm assim 20/06/2018 às 13:26
  • É Bootstrap? Qual versão do Bootstrap ?
    – Tony
    20/06/2018 às 13:28
  • não, é o materialize 20/06/2018 às 13:29
  • O colega Leandro postou uma resposta, usando Bootstrap, testei esta aqui e funcionou.
    – Tony
    20/06/2018 às 13:30

1 Resposta 1

1

Cara faltou fechar a tag div como disse o Tony, certifique-se que vc importou todos os arquivos necessários para o funcionamento. segue o seu código funcionando:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<tr> 
  <td><input type="checkbox" name="chck" id="chck" class="filled-in chk-col-teal">
    <label for="rememberme">Título</label>
      <div class="collapse" id="collapseExample">
        <div class="well">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </div>
      </div>  
  </td>
  <td style="width:20px"><button class="btn bg-cyan waves-effect m-b-15" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Detalhes</button>
  </td>
</tr>

5
  • eu fiz no materialize 20/06/2018 às 13:30
  • consegue mudar? 20/06/2018 às 13:30
  • Achei que era o bootstrap, vou ver com o Materialize
    – LeAndrade
    20/06/2018 às 13:30
  • Cara pelo que percebi na documentação ele só funciona no esquema de lista, com ul e li, pelo menos os exemplos que estão lá é assim, não sei se com esse esquema de tabela funciona o collapse do Materialize.
    – LeAndrade
    20/06/2018 às 13:47
  • vou tentar mudar para o bootstrap 20/06/2018 às 13:49

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 .