Create a "table" with a " Collapsible"
I am creating a bill 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 from the last 2 years.
The problem is that you will have a "more details" button that clicking, an area underneath will open, equal to a Collapsible (to show notes from the billet, a plain text area). But you can't put a Collapsible inside from a table. Have you ever had a similar problem, or any way I can do it?
Code I made- >
<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>1 answers
You don't need to necessarily mind collapses anything, in fact you can hide or show the contents. I made a very simple code, sometimes it answers you, 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 the class of Element
This tool of embedding the code here from Stackoverflow did not show the edges the right way, but if you copy the code it will separate the <tr> straight
Adaptation with code. It only includes a few classes, vc will need to make a "pixel perfect" adjustment for the separator lines to be perfect, in this case vc 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
}
The little set at the end of which will 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 the
<script>, but I do not eat much ofJSand you need a script that works for multiple elements, this will only take the element with theID