Expandable Content

Slot your own markup templating directly into <zg-column> instances to setup your content for toggling. Then use CSS and/or JavaScript to execute it.

Note: This is not a built-in process and you will need to create the functionality yourself. This merely illustrates <zg-column>'s flexibility.


Use slotted content to build an expandable row.

<zg-column type="custom" header="2016 FA Cup Details">
  <div class="header">
  <div class="expandable">
    <p><strong>Rank:</strong> [[record.FIFA ranking]]</p>
    <p><strong>Coach:</strong> [[record.Coach]]</p>
    <p><strong>Bio:</strong> [[record.Bio]]</p>


Use slotted content to build an expandable column.

<zg-column index="Coach, Bio" header="Coach Info" renderer="_bindAccordion">
    <section class="accordion">
      <input type="checkbox" id="changeme" >
      <label for="changeme">[[index.Coach]]</label>
        <p class="coachBio">[[index.Bio]]</p>