accordion input demo

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .accordion-flex-layout {
      --zg-cell-vertical-align: top;
    }

    /* target accordion for mobile and display as column*/
    zing-grid[viewport="mobile"] .accordion-container {
      flex-direction: column;
      flex-grow: 1;
    }

    /* Main accordion styling */
    .accordion input {
      display: none;
    }

    .accordion label {
      position: relative;
      display: block;
      background: #eee;
      border-radius: .25em;
      cursor: pointer;
      margin-bottom: .125em;
      padding: .75rem 1em;
      z-index: 20;
    }

    .accordion label:hover {
      background: #ccc;
    }

    .accordion input:checked+label {
      background: #ccc;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      color: white;
      margin-bottom: 0;
    }

    .accordion label::after {
      content: '+';
      position: absolute;
      right: 5px;
    }

    .accordion input:checked+label::after {
      content: '-';
      position: absolute;
      right: 5px;
    }

    .accordion article {
      background: #f7f7f7;
      /* 
	 * max-height allows height transition in CSS 
	 * use height: 0px; otherwise
	 */
      max-height: 0px;
      overflow: hidden;
      z-index: 10;
      opacity: 0;
      /* allow closing transition */
      -webkit-transition: all 0.7s ease;
      -moz-transition: all 0.7s ease;
      -o-transition: all 0.7s ease;
      transition: all 0.7s ease;
    }

    .accordion article {
      padding: 1em;
      cursor: default;
    }

    .accordion input:checked article {}

    .accordion input:checked~article {
      border-bottom-left-radius: .25em;
      border-bottom-right-radius: .25em;
      /* 
	 * max-height allows height transition in CSS 
	 * use height: auto; otherwise
	 */
      max-height: 500px;
      margin-bottom: .125em;
      opacity: 1;
      /* allow opening transition */
      -webkit-transition: all 1s ease;
      /* Safari */
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      transition: all 1s ease;
    }

    zing-grid[loading] {
      height: 503px;
    }
  </style>
</head>

<body>

  <zing-grid caption="2016 FA Cup  Teams" pager page-size="5" search sort>
    <zg-source>
      <p>Source: <a href="https://github.com/jokecamp/FootballData" target="_blank">https://github.com/jokecamp/FootballData</a>
      </p>
    </zg-source>
    <zg-data>
      <zg-param name="src" value="https://storage.googleapis.com/zinggrid-pwa.appspot.com/2016-fa-cup.json"></zg-param>
      <zg-param name="recordPath" value="sheets.Teams"></zg-param>
    </zg-data>
    <zg-colgroup>
      <zg-column index="Team" header="Team Name"></zg-column>
      <zg-column index="Group" header="Group"></zg-column>
      <zg-column index="FIFA ranking" header="FIFA Ranking" width="fitcontent"></zg-column>
      <zg-column renderer="_bindAccordion" cell-class="accordion-flex-layout" index="Coach, Bio" header="Coach Info" width=250>
        <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>

      <zg-column cell-class="accordion-flex-layout" index="strengths,weaknesses" header="Team Strengths/Weaknesses" renderer="_bindAccordion">
        <template>
          <style>
            h3 {
              padding-bottom: 0;
              margin-bottom: 0;
            }

            h3+p {
              margin-top: 3px;
              margin-left: 8px;
            }
          </style>
          <section class="accordion">
            <input type="checkbox" id="changeme" />
            <label for="changeme">Expand Me</label>
            <article>
              <h3>Strengths</h3>
              <p class="strengths">[[index.strengths]]</p>
              <h3>Weaknesses</h3>
              <p class="weakness">[[index.weaknesses]]</p>
            </article>
          </section>
        </template>
      </zg-column>
      <zg-column index="Team" header="Roster" width="350"></zg-column>
    </zg-colgroup>
  </zing-grid>

  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // global event handler for expanding dropdowns
    const expandHandler = function() {
      this.classList.toggle('active');
      this.nextElementSibling.classList.toggle('show');
    }

    // generate randomId for dropdownsreturn Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
    const randomId = () => {
      return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
    }

    // custom render function for coach info accordion
    // custom render function for coach info accordion
    function _bindAccordion(name, bio, cellRef, $cell) {
      // grab template contents
      const $input = cellRef.querySelector('input');
      const $label = cellRef.querySelector('label');

      // assign template attributes and custom id's
      // so the label for will trigger the dropdown
      const dropdownID = randomId();
      $input.setAttribute('id', `accordion_${dropdownID}`);
      $label.setAttribute('for', `accordion_${dropdownID}`);
    };
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>

<body>

  <zing-grid caption="2016 FA Cup  Teams" pager page-size="5" search sort>
    <zg-source>
      <p>Source: <a href="https://github.com/jokecamp/FootballData" target="_blank">https://github.com/jokecamp/FootballData</a>
      </p>
    </zg-source>
    <zg-data>
      <zg-param name="src" value="https://storage.googleapis.com/zinggrid-pwa.appspot.com/2016-fa-cup.json"></zg-param>
      <zg-param name="recordPath" value="sheets.Teams"></zg-param>
    </zg-data>
    <zg-colgroup>
      <zg-column index="Team" header="Team Name"></zg-column>
      <zg-column index="Group" header="Group"></zg-column>
      <zg-column index="FIFA ranking" header="FIFA Ranking" width="fitcontent"></zg-column>
      <zg-column renderer="_bindAccordion" cell-class="accordion-flex-layout" index="Coach, Bio" header="Coach Info" width=250>
        <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>

      <zg-column cell-class="accordion-flex-layout" index="strengths,weaknesses" header="Team Strengths/Weaknesses" renderer="_bindAccordion">
        <template>
          <style>
            h3 {
              padding-bottom: 0;
              margin-bottom: 0;
            }

            h3+p {
              margin-top: 3px;
              margin-left: 8px;
            }
          </style>
          <section class="accordion">
            <input type="checkbox" id="changeme" />
            <label for="changeme">Expand Me</label>
            <article>
              <h3>Strengths</h3>
              <p class="strengths">[[index.strengths]]</p>
              <h3>Weaknesses</h3>
              <p class="weakness">[[index.weaknesses]]</p>
            </article>
          </section>
        </template>
      </zg-column>
      <zg-column index="Team" header="Roster" width="350"></zg-column>
    </zg-colgroup>
  </zing-grid>

</body>

</html>

.accordion-flex-layout {
  --zg-cell-vertical-align: top;
}

/* target accordion for mobile and display as column*/
zing-grid[viewport="mobile"] .accordion-container {
  flex-direction: column;
  flex-grow: 1;
}

/* Main accordion styling */
.accordion input {
  display: none;
}

.accordion label {
  position: relative;
  display: block;
  background: #eee;
  border-radius: .25em;
  cursor: pointer;
  margin-bottom: .125em;
  padding: .75rem 1em;
  z-index: 20;
}

.accordion label:hover {
  background: #ccc;
}

.accordion input:checked+label {
  background: #ccc;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  color: white;
  margin-bottom: 0;
}

.accordion label::after {
  content: '+';
  position: absolute;
  right: 5px;
}

.accordion input:checked+label::after {
  content: '-';
  position: absolute;
  right: 5px;
}

.accordion article {
  background: #f7f7f7;
  /* 
	 * max-height allows height transition in CSS 
	 * use height: 0px; otherwise
	 */
  max-height: 0px;
  overflow: hidden;
  z-index: 10;
  opacity: 0;
  /* allow closing transition */
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
}

.accordion article {
  padding: 1em;
  cursor: default;
}

.accordion input:checked article {}

.accordion input:checked~article {
  border-bottom-left-radius: .25em;
  border-bottom-right-radius: .25em;
  /* 
	 * max-height allows height transition in CSS 
	 * use height: auto; otherwise
	 */
  max-height: 500px;
  margin-bottom: .125em;
  opacity: 1;
  /* allow opening transition */
  -webkit-transition: all 1s ease;
  /* Safari */
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

// global event handler for expanding dropdowns
const expandHandler = function() {
  this.classList.toggle('active');
  this.nextElementSibling.classList.toggle('show');
}

// generate randomId for dropdownsreturn Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
const randomId = () => {
  return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
}

// custom render function for coach info accordion
// custom render function for coach info accordion
function _bindAccordion(name, bio, cellRef, $cell) {
  // grab template contents
  const $input = cellRef.querySelector('input');
  const $label = cellRef.querySelector('label');

  // assign template attributes and custom id's
  // so the label for will trigger the dropdown
  const dropdownID = randomId();
  $input.setAttribute('id', `accordion_${dropdownID}`);
  $label.setAttribute('for', `accordion_${dropdownID}`);
};