Table with toggle example

First column Second column Read more

Instructions

You can start by copying the code below into the source of a web content.
1. Change the name of the table header (columns). Make sure to change the data-ecl-table-header within the table cells to match the table headers. In this example we have 2 columns, but feel free to add more according to your needs. Just make sure when you add a th (column) to add a td(cells) as well. These have a yellow background in the example below.
2. After this, you can duplicate the tr (highlighted with bold) to add more rows to the table. Just make sure to change the aria-controls of the button and the id of the exapandable content div as higlighted below with the light blue color. Make sure that these match. You can just change the number at the end and it will work (as long as it is unique).
3. You can click the source button again to see how the table will appear for the user. Here, you should be able to change the expandable content (it will be visible while editing the web content). You can have multiple paragraphs within the expandable content div, so feel free to add more (but you have to do that from within the source).
4. Repeat steps 2-3 for as many rows as needed.

<table class="ecl-table">
  <thead class="ecl-table__head">
    <tr class="ecl-table__row">
      <th class="ecl-table__header" scope="col">First column</th>
      <th class="ecl-table__header" scope="col">Second column</th>
      <th class="ecl-table__header" style="width: 85px;">Read more</th>
    </tr>
  </thead>
  <tbody class="ecl-table__body">
    <tr aria-expanded="false" class="ecl-table__row ecl-u-border-width-0">
      <td class="ecl-table__cell" data-ecl-table-header="First column">r1c1</td>
      <td class="ecl-table__cell" data-ecl-table-header="Second column">r1c2</td>
      <td class="ecl-table__cell" data-ecl-table-header="Read more">
        <div class="ecl-expandable ecl-u-ma-none" data-ecl-expandable="true" data-ecl-auto-init="Expandable">
          <button class="ecl-button ecl-button--ghost ecl-expandable__toggle" type="button" aria-controls="expandable-content-1" data-ecl-expandable-toggle data-ecl-label-expanded="Expanded" data-ecl-label-collapsed="Collapsed" aria-expanded="false">
            <span class="ecl-button__container"><svg class="ecl-icon ecl-icon--fluid ecl-icon--rotate-180 ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon><use xlink:href="/eurostat/o/estat-theme-ecl/images/icons/sprites/icons.svg#corner-arrow"></use></svg></span>
          </button>
        </div>
      </td>
    </tr>
    <tr class="ecl-table__row expandable">
      <td class="ecl-u-pa-none ecl-u-type-paragraph-m ecl-table__cell" colspan="100%">
        <div id="expandable-content-1" class="ecl-expandable__content ecl-u-pa-s ecl-u-ma-none" hidden>
          <p class="ecl-u-type-paragraph-m">Test toggle</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>