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.

Rows

Use slotted content to build an expandable row.
CloseCopy Copied
<zg-column type="custom" header="2016 FA Cup Details">
  <div class="header">
    ...
  </div>
  <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>
  </div>
</zg-column>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Columns

Use slotted content to build an expandable column.
CloseCopy Copied
<zg-column index="Coach, Bio" header="Coach Info" renderer="_bindAccordion">
  <template>
    <section class="accordion">
      <input type="checkbox" id="changeme" >
      <label for="changeme">[[index.Coach]]</label>
      <article>
        <p class="coachBio">[[index.Bio]]</p>
      </article>
    </section>
  </template>
</zg-column>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Related Resources

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloadingloading