<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Air Quotes Card Mode Grid + Accordion Content (cpc-air CodePen Challenge)</title>
<link href="https://fonts.googleapis.com/css?family=Muli:400,400i|Noto+Serif:400,700" rel="stylesheet">
<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<zing-grid
caption="Air Quotes"
src="https://zinggrid-examples.firebaseio.com/air-quotes"
layout="card"
layout-controls="false"
pager
page-size="6"
page-size-options="3,6,9,12">
<zg-colgroup>
<zg-column index="quote" header=" ">
“[[index.quote]]”
</zg-column>
<zg-column index="author" header=" "><em>— [[index.author]]</em></zg-column>
<zg-column renderer="_bindAccordion" cell-class="accordion-flex-layout" index="author, bio" header=" ">
<template>
<section class="accordion">
<input type="checkbox" id="changeme" >
<label for="changeme">About the Author</label>
<article>
<p class="authorBio">[[index.bio]]</p>
</article>
</section>
</template>
</zg-column>
</zg-colgroup>
<zg-footer>
<p>Biography sources: <a href="https://www.wikipedia.org/" target="_blank" crossorigin>Wikipedia</a>
</zg-footer>
</zing-grid>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
body{
background:#e6e6e6;
padding: 50px 0;
font-family: 'Noto Serif', serif;
}
zing-grid {
max-width: 1000px;
margin: 0 auto;
font-family: 'Noto Serif', serif;
--theme-color-primary: #383838;
background: none;
color: #414141;
border: none;
--zg-pager-font-size: 11px;
--zg-row-body-background_hover: #f4fbff;
--zg-row-color_hover: #383838;
}
zg-caption {
background: none;
color: #414141;
font-size: 40px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
zg-body {
background: none;
color: #414141;
}
zg-row {
background: #ffffff;
}
zg-row[layout="card"] {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
margin: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
}
zg-body[layout="card"] {
--zg-card-columns: 33.3%;
}
[data-field-index="author"] {
align-items: center;
justify-content: center;
font-family: 'Muli', sans-serif;
}
zg-cell:nth-child(1) {
font-size: 17px;
line-height: 1.3;
text-align: center;
}
zg-cell:nth-child(2) {
font-size: 12px;
line-height: 1.3;
color: #a8a8a8;
}
zg-row[layout="row"] zg-cell:nth-child(1) {
text-align: left;
}
zg-watermark {
background: none;
border: none;
font-family: 'Muli', sans-serif;
justify-content: center;
font-size: 11px;
margin-top: 10px;
}
zg-footer {
font-family: 'Muli', sans-serif;
text-align: center;
font-size: 12px;
margin-top: 20px;
}
.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: #f7f7f7;
border-radius: .25em;
cursor: pointer;
margin-bottom: .125em;
padding: .75rem 1em;
z-index: 20;
border: 1px solid #cccccc;
text-align: center;
font-size: 13px;
}
.accordion label:hover {
background: #ccc;
}
.accordion input:checked + label {
background: #dddddd;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
color: #383838;
margin-bottom: -1px;
}
.accordion label::after {
content: '+';
position:absolute;
right:5px;
}
.accordion input:checked + label::after {
content: '-';
position:absolute;
right:5px;
}
.accordion article {
background: #f9f9f9;
/*
* 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;
border: 1px solid #cccccc;
color: #383838;
font-size: 13px;
line-height: 1.5;
}
.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
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}`);
};