CODEWITHSUNDEEP
javascriptjqueryhtmlcssmaterialize
TDmoneybanks
TDmoneybanks

Reputation: 518

materialize: make table row accordion header

I am trying to use materialize to create a table that allows for each table row to be clickable. Clicking on a row should expand an accordion under the row that holds more data for the row. I can not seem to get the accordion to open or set the whole as the header for the accordion. I have tried adding the classes straight to the tr's as well as wrapping each tr in a div. neither solution gave the right behavior. Here is the code I currently have:

    <script   src="https://code.jquery.com/jquery-3.0.0.min.js"   integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script>

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

  <script type="text/javascript"> 
    $('.collapsible').collapsible({
       accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
     });
   </script>
<table class="bordered">
  <thead>
    <tr>
      <th data-field="id">Name</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>

  <tbody>
    <tr class="collapsible" data-collapsible="accordion">
        <td class="collapsible-header">Alvin</td>
        <div class="collapsible-body">
          <p>
            hello
          </p>
        </div>
        <td>Eclair</td>
        <td>$0.87</td>
    </tr>
    <tr>
      <td>Alan</td>
      <td>Jellybean</td>
      <td>$3.76</td>
    </tr>
    <tr>
      <td>Jonathan</td>
      <td>Lollipop</td>
      <td>$7.00</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Views: 5680

Answers (1)

Waldir J. Pereira Junior
Waldir J. Pereira Junior

Reputation: 836

The Materialize Collapsible needs to be configured on an li element.

Try this:

<table class="bordered">
  <thead>
    <tr>
      <th data-field="id">Name</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
        <td class="collapsible" data-collapsible="accordion">
          <li>
            <div class="collapsible-header">Alvin</div>
            <div class="collapsible-body">
              <p>
                hello
              </p>
            </div>
          </li>
        </td>

        <td>Eclair</td>
        <td>$0.87</td>
    </tr>
    <tr>
      <td>Alan</td>
      <td>Jellybean</td>
      <td>$3.76</td>
    </tr>
    <tr>
      <td>Jonathan</td>
      <td>Lollipop</td>
      <td>$7.00</td>
    </tr>
  </tbody>
</table>

The layout is not so good, but works as you expect. If you are using Materialize just for the collapsible, I suggest you use another component, like Bootstrap Collapse

Upvotes: 2

Related Questions