Collapse by not hiding

Asked

Viewed 57 times

0

I’m trying to make a table with Collapse, but it turns out that by clicking the button Collapse shows, but when trying to hide, it simply doesn’t work.

inserir a descrição da imagem aqui

HTML code

<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>
  • Check there. Missed to close the tag DIV

  • @Tony doesn’t work that way

  • Is it Bootstrap? What version of Bootstrap ?

  • no, it’s the materialize

  • Leandro posted an answer, using Bootstrap, I tested this one and it worked.

  • Which version of Materialize you are using??

  • I’m using the most current

Show 2 more comments

1 answer

1

Guy missed closing the tag div like Tony said, make sure you imported all the files needed for the operation. follow your code working:

<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>

  • I did in the materialize

  • can change?

  • I thought it was the bootstrap, I’ll check with Materialize

  • Guy from what I noticed in the documentation he only works on the list scheme, with ul and li, at least the examples that are there is like this, I do not know if with this table scheme works the Materialize Collapse.

  • I’ll try to switch to bootstrap

Browser other questions tagged

You are not signed in. Login or sign up in order to post.