Tech CEO Demos

122 of 122

Create your own cell 'card' template to create unique grid layouts.

In this demo, clicking on the CEO will drill-down to a new detail view with more information on them.

Result Full HTML CSS JS
Edit Download
[[index.twitter]]
CEO N/A

[[record.name]]

[[record.description]]

Company Logo Twitter
[[record.company]] Logo N/A [[record.twitter]]

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  <style>
    .zg-html,
    .zg-body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .zg-body .drilldown--container {
      position: relative;
    }

    .zg-body .image-portrait--column img {
      border-radius: 50%;
      width: 55px;
      filter: grayscale(50%);
    }

    .zg-body .image-portrait--column:hover img,
    zg-card:hover img {
      filter: none;
    }

    zing-grid {
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity .5s ease;
      --zg-caption-background: #003749;
      --zg-caption-color: #fff;
    }

    zing-grid.active {
      opacity: 1;
      pointer-events: initial;
    }

    zg-button[action="removerecord"] {
      --theme-color-primary: #f50057;
    }

    zg-row:hover {
      cursor: pointer;
    }

    /* CARD STYLING */

    .zg-body .bottom--container {
      display: flex;
      flex-direction: column;
    }

    .zg-body .bottom--container .row {
      display: flex;
      justify-content: space-around;
      padding: 5px;
    }

    .zg-body .bottom--container .col {
      flex: 1;
      width: 32%;
      text-align: center;
    }

    .zg-body .bottom--container .header {
      background: #f5f5f5;
    }

    .zg-body .header--container {
      display: flex;
      justify-content: space-between;
    }

    .zg-body .logo-large img {
      width: 36px;
    }

    .zg-body .logo-small {
      width: 30px;
    }

    zg-card:hover {
      background: var(--zg-row-body-background_hover);
      cursor: pointer;
    }

    zg-card .image--container {
      text-align: center;
    }

    zg-card .image--container img {
      border-radius: 50%;
      height: 80px;
      filter: grayscale(50%);
    }

    /* SECONDARY GRID STYLING */

    .zg-body .drilldown-card {
      display: flex;
      flex-direction: column;
      padding: 0;
    }

    .zg-body .main--container {
      display: flex;
    }

    .zg-body .main--container .left--container {
      width: 300px;
      overflow: hidden;
      border-right: 4px solid #00b0ff;
    }

    .zg-body .main--container .right--container {
      flex: 2;
      padding: 1.5rem;
    }

    .zg-body #secondaryGrid zg-menu-bar,
    .zg-body #secondaryGrid zg-head {
      display: none;
    }

    .zg-body #secondaryGrid .header--container {
      position: relative;
      z-index: 200;
      padding: 12px;
      background: #fff;
      box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
    }

    .zg-body .back-button {
      background: #dc1257;
      color: #fff;
      border: 1px solid transparent;
      font-size: .9rem;
      box-sizing: border-box;
      border-radius: .5rem;
      padding: 0 1.4rem;
      text-transform: uppercase;
      transition: background-color .1s, border-color .1s, color .1s;
      user-select: none;
      cursor: pointer;
      font-weight: 600;
      min-height: 40px;
      display: inline-flex;
      min-width: 130px;
      align-items: center;
      -webkit-box-align: center;
      -webkit-box-pack: center;
      justify-content: center;
      line-height: 1.05;
      outline: 0;
    }

    .zg-body .back-button:focus {
      background-color: #e25786;
    }

    .zg-body .back-button:hover {
      background-color: #eb7fa4;
      border-color: transparent;
    }

    .zg-body .back-button:active {
      background-color: #df4277;
    }

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

<body class="zg-body">

  <div class="drilldown--container">
    <div class="wrapper">
      <zing-grid id="topLevelGrid" class="active" caption="Tech CEOs" editor layout pager page-size="4" page-size-options="3,4,6" data='[
            {
            "name": "Mark Zuckerberg1",
            "company": "Facebook",
            "logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/facebook_logo.png",
            "portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/zuckerberg.jpg",
            "twitter": "@finkd",
            "description": "Mark Elliot Zuckerberg (born May 14, 1984) is an American technology entrepreneur and philanthropist best known for co-founding and leading Facebook as its chairman and chief executive officer."
            },
            {
            "name": "Tim Cook",
            "company": "Apple",
            "logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/apple_logo.png",
            "portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/cook.jpg",
            "twitter": "@tim_cook",
            "description": "Timothy Donal Cook is an American business executive, industrial engineer and developer. Cook is the Chief Executive officer of Apple Inc, previously serving as the companys Chief Operating Officer, under its founder Steve Jobs. Cook joined Apple in March 1998 as senior vice president of worldwide operations."
            },
            {
            "name": "Satya Narayana Nadella",
            "company": "Microsoft",
            "logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/microsoft_logo.png",
            "portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/satya.jpg",
            "twitter": "@satyanadella",
            "description": "Satya Narayana Nadella (born 19 August 1967) is an Indian American business executive. He is the current Chief Executive Officer (CEO) of Microsoft, succeeding Steve Ballmer in 2014. Before becoming CEO, he was . Executive Vice President of Microsofts cloud and enterprise group, responsible for building and running the company."
            },
            {
            "name": "Sundar Pichai",
            "company": "Google",
            "logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/google_logo.png",
            "portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/sundar.jpg",
            "twitter": "@sundarpichai",
            "description": "Pichai is the chief executive officer (CEO) of Google Inc. Formerly the Product Chief of Google, Pichais current role was announced on August 10, 2015, as part of the restructuring process that made Alphabet Inc. into Googles parent company, and he assumed the position on October 2, 2015."
            },
            {
            "name": "Michael Dell",
            "company": "Dell",
            "logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/dell_logo.png",
            "portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/mdell.jpg",
            "twitter": "@MichaelDell",
            "description": "Michael Saul Dell (born February 23, 1965) is an American businessman, investor, philanthropist, and author. He is the founder and CEO of Dell Technologies, one of the worlds largest technology infrastructure companies. He is ranked as the 38th richest person in the world by Forbes, with a net worth of US$ 23.5 billion as of dollars on April 5, 2018."
            },
            {
            "name": "Ginni Rometty",
            "company": "IBM",
            "logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/ibm_logo.png",
            "portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/ginny.jpg",
            "twitter": "@ginnirometty",
            "description": "Virginia Marie \"Ginni\" Rometty (born July 29, 1957) is an American business executive. She is the current chair, president, and CEO of IBM, and the first woman to head the company. Prior to becoming president and CEO in January 2012, she first joined IBM as a systems engineer in 1981 and subsequently headed global sales, marketing, and strategy. While general manager of IBM’s global services division, in 2002 she helped negotiate IBMs purchase of PricewaterhouseCoopers IT consulting business, becoming known for her work integrating the two companies. Since becoming CEO, she has focused IBM on analytics, cloud computing, and cognitive computing systems."
            }
          ]'>
        <!-- row layouts -->
        <zg-colgroup>
          <zg-column index="selector" type="selector"></zg-column>
          <zg-column index="portraitUrl" header=" " type="image" cell-class="image-portrait--column" menu-text="Portrait"></zg-column>
          <zg-column index="name"></zg-column>
          <zg-column index="logoUrl" header="Logo" type="image" cell-class="logo-large"></zg-column>
          <zg-column index="company"></zg-column>
          <zg-column index="twitter" type="url">
            <a href="https://twitter.com/[[index.twitter]]" target="_blank">[[index.twitter]]</a>
          </zg-column>
          <zg-column index="editor" type="editor"></zg-column>
          <zg-column index="remover" type="remover"></zg-column>
          <zg-card>
            <template>
              <!-- top half of card layout -->
              <div class="header--container">
                <zg-checkbox></zg-checkbox>
                <div>
                  <zg-button role="editrecord"></zg-button>
                  <zg-button role="removerecord"></zg-button> 
                </div>
              </div>
              <!-- middle of card -->
              <div class="image--container">
                <img src="[[record.portraitUrl]]" alt="CEO N/A">
                <h3>[[record.name]]</h3>
              </div>
              <!-- bottom of card -->
              <div class="bottom--container">
                <!-- three column grid layout -->
                <div class="row header">
                  <span class="col">Company</span>
                  <span class="col">Logo</span>
                  <span class="col">Twitter</span>
                </div>
                <div class="row">
                  <span class="col">[[record.company]]</span>
                  <span class="col">
                    <img src="[[record.logoUrl]]" class="logo-small" alt="Logo N/A">
                  </span>
                  <span class="col">
                    <a href="https://twitter.com/[[record.twitter]]" target="_blank">[[record.twitter]]</a>
                  </span>
                </div>
              </div>
            </template>
          </zg-card>
      </zing-grid>
      <zing-grid id="secondaryGrid" caption="Tech CEOs" layout="row" layout-controls="disabled">
        <!-- card layout -->
        <zg-colgroup>
          <zg-column index="custom" cell-class="drilldown-card">
            <!-- top half of card layout -->
            <div class="header--container">
              <div>
                <button class="back-button" onclick="_drilldownReturn();">Back</button>
              </div>
            </div>
            <!-- bottom half of card -->
            <div class="main--container">
              <!-- lef of card -->
              <div class="left--container image--container">
                <img src="[[record.portraitUrl]]" alt="CEO N/A">
              </div>
              <!-- bottom of card -->
              <div class="right--container">
                <h3>[[record.name]]</h3>
                <p>[[record.description]]</p>
                <div class="bottom--container">
                  <div class="row header">
                    <span class="col">Company</span>
                    <span class="col">Logo</span>
                    <span class="col">Twitter</span>
                  </div>
                  <div class="row">
                    <span class="col">[[record.company]]</span>
                    <span class="col">
                        <img src="[[record.logoUrl]]" class="logo-small" alt="Logo N/A">
                      </span>
                    <span class="col">
                        <a href="https://twitter.com/[[record.twitter]]" target="_blank">[[record.twitter]]</a>
                      </span>
                  </div>
                </div>
              </div>
            </div>
          </zg-column>
        </zg-colgroup>
      </zing-grid>
    </div>
  </div>
  <script>
    // secondary grid click back
    function _drilldownReturn() {
      // swap grids
      secondaryGrid.classList.remove('active');
      topLevelGrid.classList.add('active');

      // clear data
      secondaryGrid.setData();
    };

    // window load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content

      ZingGrid.registerMethod(_drilldownReturn);

      const topLevelGrid = document.querySelector('#topLevelGrid');
      const secondaryGrid = document.querySelector('#secondaryGrid');

      // top level row click
      if (topLevelGrid) topLevelGrid.addEventListener('record:click', function(e) {
        // if its not a checkbox or anchor tag
        if (e.detail.ZGEvent.oDOMTarget.tagName !== 'ZG-CHECKBOX' &&
          e.detail.ZGEvent.oDOMTarget.tagName !== 'A') {
          // get data
          const rowData = JSON.parse(JSON.stringify(e.detail.ZGData.data));
          // remove unwanted properties
          delete rowData['sRESTIndex'];
          delete rowData['sRecordIndex'];
          delete rowData['nOriginalIndex'];
          console.log(rowData)
          //assign data @fixme can't pass object. Must stringify
          secondaryGrid.setData(JSON.stringify(rowData));

          // swap grids
          topLevelGrid.classList.remove('active');
          secondaryGrid.classList.add('active');
        }
      });
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
	<head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
	 	<script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
	</head>
	<body class="zg-body">
    
    <div class="drilldown--container">
      <div class="wrapper">
        <zing-grid
          id="topLevelGrid"
          class="active"        
          caption="Tech CEOs"
          editor
          layout
          pager
          page-size="4"
          page-size-options="3,4,6"
          data='[
            {
            "name": "Mark Zuckerberg1",
            "company": "Facebook",
            "logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/facebook_logo.png",
            "portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/zuckerberg.jpg",
            "twitter": "@finkd",
            "description": "Mark Elliot Zuckerberg (born May 14, 1984) is an American technology entrepreneur and philanthropist best known for co-founding and leading Facebook as its chairman and chief executive officer."
            },
            {
            "name": "Tim Cook",
            "company": "Apple",
            "logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/apple_logo.png",
            "portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/cook.jpg",
            "twitter": "@tim_cook",
            "description": "Timothy Donal Cook is an American business executive, industrial engineer and developer. Cook is the Chief Executive officer of Apple Inc, previously serving as the companys Chief Operating Officer, under its founder Steve Jobs. Cook joined Apple in March 1998 as senior vice president of worldwide operations."
            },
            {
            "name": "Satya Narayana Nadella",
            "company": "Microsoft",
            "logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/microsoft_logo.png",
            "portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/satya.jpg",
            "twitter": "@satyanadella",
            "description": "Satya Narayana Nadella (born 19 August 1967) is an Indian American business executive. He is the current Chief Executive Officer (CEO) of Microsoft, succeeding Steve Ballmer in 2014. Before becoming CEO, he was . Executive Vice President of Microsofts cloud and enterprise group, responsible for building and running the company."
            },
            {
            "name": "Sundar Pichai",
            "company": "Google",
            "logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/google_logo.png",
            "portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/sundar.jpg",
            "twitter": "@sundarpichai",
            "description": "Pichai is the chief executive officer (CEO) of Google Inc. Formerly the Product Chief of Google, Pichais current role was announced on August 10, 2015, as part of the restructuring process that made Alphabet Inc. into Googles parent company, and he assumed the position on October 2, 2015."
            },
            {
            "name": "Michael Dell",
            "company": "Dell",
            "logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/dell_logo.png",
            "portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/mdell.jpg",
            "twitter": "@MichaelDell",
            "description": "Michael Saul Dell (born February 23, 1965) is an American businessman, investor, philanthropist, and author. He is the founder and CEO of Dell Technologies, one of the worlds largest technology infrastructure companies. He is ranked as the 38th richest person in the world by Forbes, with a net worth of US$ 23.5 billion as of dollars on April 5, 2018."
            },
            {
            "name": "Ginni Rometty",
            "company": "IBM",
            "logoUrl": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/ibm_logo.png",
            "portraitUrl":"https://storage.googleapis.com/zinggrid-pwa.appspot.com/ginny.jpg",
            "twitter": "@ginnirometty",
            "description": "Virginia Marie \"Ginni\" Rometty (born July 29, 1957) is an American business executive. She is the current chair, president, and CEO of IBM, and the first woman to head the company. Prior to becoming president and CEO in January 2012, she first joined IBM as a systems engineer in 1981 and subsequently headed global sales, marketing, and strategy. While general manager of IBM’s global services division, in 2002 she helped negotiate IBMs purchase of PricewaterhouseCoopers IT consulting business, becoming known for her work integrating the two companies. Since becoming CEO, she has focused IBM on analytics, cloud computing, and cognitive computing systems."
            }
          ]'>
          <!-- row layouts -->
          <zg-colgroup>
            <zg-column index="selector" type="selector"></zg-column>
            <zg-column index="portraitUrl" header=" " type="image" cell-class="image-portrait--column" menu-text="Portrait"></zg-column>
            <zg-column index="name"></zg-column>
            <zg-column index="logoUrl" header="Logo" type="image" cell-class="logo-large"></zg-column>
            <zg-column index="company"></zg-column>
            <zg-column index="twitter" type="url">
              <a href="https://twitter.com/[[index.twitter]]" target="_blank">[[index.twitter]]</a>
            </zg-column>
            <zg-column index="editor" type="editor"></zg-column>
            <zg-column index="remover" type="remover"></zg-column>
          <zg-card>
            <template>
              <!-- top half of card layout -->
              <div class="header--container">
                <zg-checkbox></zg-checkbox>
                <div>
                  <zg-button role="editrecord"></zg-button>
                  <zg-button role="removerecord"></zg-button> 
                </div>
              </div>
              <!-- middle of card -->
              <div class="image--container">
                <img src="[[record.portraitUrl]]" alt="CEO N/A">
                <h3>[[record.name]]</h3>
              </div>
              <!-- bottom of card -->
              <div class="bottom--container">
                <!-- three column grid layout -->
                <div class="row header">
                  <span class="col">Company</span>
                  <span class="col">Logo</span>
                  <span class="col">Twitter</span>
                </div>
                <div class="row">
                  <span class="col">[[record.company]]</span>
                  <span class="col">
                    <img src="[[record.logoUrl]]" class="logo-small" alt="Logo N/A">
                  </span>
                  <span class="col">
                    <a href="https://twitter.com/[[record.twitter]]" target="_blank">[[record.twitter]]</a>
                  </span>
                </div>
              </div>
            </template>
          </zg-card>
        </zing-grid>
        <zing-grid
          id="secondaryGrid"
          caption="Tech CEOs"
          layout="row"
          layout-controls="disabled">
          <!-- card layout -->
          <zg-colgroup>
            <zg-column index="custom" cell-class="drilldown-card">
              <!-- top half of card layout -->
              <div class="header--container">
                <div>
                  <button class="back-button" onclick="_drilldownReturn();">Back</button>
                </div>
              </div>
              <!-- bottom half of card -->
              <div class="main--container">
                <!-- lef of card -->
                <div class="left--container image--container">
                  <img src="[[record.portraitUrl]]" alt="CEO N/A">
                </div>
                <!-- bottom of card -->
                <div class="right--container">
                  <h3>[[record.name]]</h3>
                  <p>[[record.description]]</p>
                  <div class="bottom--container">
                    <div class="row header">
                      <span class="col">Company</span>
                      <span class="col">Logo</span>
                      <span class="col">Twitter</span>
                    </div>
                    <div class="row">
                      <span class="col">[[record.company]]</span>
                      <span class="col">
                        <img src="[[record.logoUrl]]" class="logo-small" alt="Logo N/A">
                      </span>
                      <span class="col">
                        <a href="https://twitter.com/[[record.twitter]]" target="_blank">[[record.twitter]]</a>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </zg-column>
          </zg-colgroup>
        </zing-grid>
      </div>
    </div>
	</body>
</html>
.zg-html, .zg-body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}

.zg-body .drilldown--container {position:relative;}

.zg-body .image-portrait--column  img {
  border-radius:50%;
  width:55px;
  filter: grayscale(50%);
}
.zg-body .image-portrait--column:hover img,
zg-card:hover img {filter: none;}

zing-grid {
  position:absolute;
  top:0;
  right:0;
  opacity:0;
  pointer-events:none;
  transition: opacity .5s ease;
	--zg-caption-background: #003749; 
  --zg-caption-color: #fff;
}

zing-grid.active {
 	opacity:1;
  pointer-events:initial;
}

zg-button[action="removerecord"] {
  --theme-color-primary: #f50057;
}

zg-row:hover {cursor:pointer;}

/* CARD STYLING */

.zg-body .bottom--container {
  display:flex;
  flex-direction:column;
}

.zg-body .bottom--container .row {
  display:flex;
  justify-content:space-around;
  padding:5px;
}

.zg-body .bottom--container .col {
  flex:1;
  width:32%;
  text-align:center;
}

.zg-body .bottom--container .header {background:#f5f5f5;}

.zg-body .header--container {
  display:flex;
  justify-content:space-between;
}

.zg-body .logo-large img {width:36px;}

.zg-body .logo-small {width:30px;}

zg-card:hover {background:var(--zg-row-body-background_hover); cursor:pointer;}

zg-card .image--container {text-align:center;}
zg-card .image--container img {
  border-radius:50%;
  height:80px;
  filter: grayscale(50%);
}

/* SECONDARY GRID STYLING */
.zg-body .drilldown-card {
  display:flex;
  flex-direction:column;
  padding:0;
}

.zg-body .main--container {display:flex;}

.zg-body .main--container .left--container {
	width:300px;
  overflow:hidden;
  border-right:4px solid #00b0ff;
}
.zg-body .main--container .right--container {flex:2;padding:1.5rem;}

.zg-body #secondaryGrid zg-menu-bar,
.zg-body #secondaryGrid zg-head
{display:none;}

.zg-body #secondaryGrid .header--container {
  position:relative;
  z-index:200;
	padding:12px;
  background:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.18);
}

.zg-body .back-button {
  background: #dc1257;
  color: #fff;
  border: 1px solid transparent;
  font-size: .9rem;
  box-sizing: border-box;
  border-radius: .5rem;
  padding: 0 1.4rem;
  text-transform: uppercase;
  transition: background-color .1s,border-color .1s,color .1s;
  user-select: none;
  cursor: pointer;
  font-weight: 600;
  min-height: 40px;
  display: inline-flex;
  min-width: 130px;
  align-items: center;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  justify-content: center;
  line-height: 1.05;
  outline: 0;
}

.zg-body .back-button:focus { background-color: #e25786; }
.zg-body .back-button:hover { background-color: #eb7fa4; border-color:transparent; }
.zg-body .back-button:active { background-color: #df4277; }
// secondary grid click back
function _drilldownReturn() {
	// swap grids
  secondaryGrid.classList.remove('active');
  topLevelGrid.classList.add('active');
  
  // clear data
  secondaryGrid.setData();
};

// window load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content
  
	ZingGrid.registerMethod(_drilldownReturn);
	
  const topLevelGrid = document.querySelector('#topLevelGrid');
  const secondaryGrid = document.querySelector('#secondaryGrid');

  // top level row click
  if (topLevelGrid) topLevelGrid.addEventListener('record:click', function(e) {
    // if its not a checkbox or anchor tag
  	if (e.detail.ZGEvent.oDOMTarget.tagName !== 'ZG-CHECKBOX' &&
        e.detail.ZGEvent.oDOMTarget.tagName !== 'A') {
      // get data
      const rowData = JSON.parse(JSON.stringify(e.detail.ZGData.data));
      // remove unwanted properties
      delete rowData['sRESTIndex'];
      delete rowData['sRecordIndex'];
      delete rowData['nOriginalIndex'];
      console.log(rowData)
      //assign data @fixme can't pass object. Must stringify
      secondaryGrid.setData(JSON.stringify(rowData));

      // swap grids
      topLevelGrid.classList.remove('active');
      secondaryGrid.classList.add('active');
    }
  });
});

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery