Create a "table" with a "Collapsible"

Navigation
1

I am creating a ticket payment program for the company's customers to pay. The style is based on Material Design (I'm using the MaterializeCss Framework). I use a table to show all the tickets for the last 2 years.

The problem is that you will have a "More Details" button that by clicking, an area underneath will open, just like a Collapsible (to show boletus observations, a plain text area). But you can not put a Collapsible inside a table. Have you ever had a similar problem, or some way I can do that?

Code I did - > 

<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>
    
asked by anonymous 06.12.2017 / 12:07

1 answer

0

You do not need to mind, nothing collapses, in fact you can hide or show the content. I made a very simple code, sometimes you answer, look there. 

  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 : Need a simple to change element class

This tool to incorporate the code here from Stackoverflow did not show the edges the right way, but if you copy the code it will separate the <tr>

I made the adaptation with the code. Just include some classes, you will need to make a "pixel perfect" setting for the separator lines to be perfect, in that case you can use tr:last-of-type for example. 

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

At the end of the collapse, just click 

<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: Do not forget <script> , however I do not handle much of JS and you need a script that works for multiple elements, it will only get the element with ID

    
06.12.2017 / 18:38
Rule Rewrite Changing scripts directories Split Error by Zero - SQL Query