Create a "table" with a "collapsible"

Asked

Viewed 376 times

1

I’m 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 boletos of the last 2 years.

The problem is that it will have a "More details" button that clicking, an area below will be Bir, like a Collapsible (to show notes of the boleto, a plain text area). But you can’t put a Collapsible inside a table. You’ve had a similar problem, or some way I can do that?

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>

javascript html5 materialize

  • Friend please add the images of the layout you have and how accurate. Also put the code of what you already have ready so we can help in the right way

  • @hugocsl here are the images Initial sketch: https://goo.gl/R4nZGp Explanation of the final desired result: https://goo.gl/YiGoQX

1 answer

0


You don’t need to mind collapse anything, in fact you can hide or show the content. 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: You need a simple one to change the class of the element

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

I made the adaptation with the code. It only includes some classes, you will need to make a "pixel Perfect" adjustment for the separator lines to be perfect, in this Part 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
}

The little arrow at the end of the one that will make 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: don’t forget the <script> , but I don’t know much about JS and you need a script that works for multiple elements, this will only get the element with the ID

  • Thanks @hugocsl for helping the solution, I based myself on your walk, but I used a Jquery animation and a shortcut with the slideToggle function. Thank you!

  • @Gabrielmarinho this young, I’m glad it worked out!

Browser other questions tagged javascript html5 materialize

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