Add a collapsible accordion element to your app

In this article, we'll be going over how to create tabs for your web application using a front-end framework called Materializecss (https://materializecss.com/collapsible.html)

This is how our end result will look.

To start we'll need to include the framework in the custom header and footer code of our Tadabase app.

<style>
ul:not(.browser-default)>li {
    list-style-type: none;
}
.z-depth-1, .collapsible {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.collapsible .collection {
  margin: 0;
  border: none;
}

.collapsible {
  padding: inherit;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  margin: 0.5rem 0 1rem 0;
}

.collapsible-header {
  display: flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
  padding: 1rem;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
.collapsible-header:focus {
  outline: 0;
}
.collapsible-header i {
  width: 2rem;
  font-size: 1.6rem;
  display: inline-block;
  text-align: center;
  margin-right: 1rem;
}

.keyboard-focused .collapsible-header:focus {
  background-color: #eee;
}

.collapsible-body {
  display: none;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  padding: 2rem;
}

.sidenav .collapsible,
.sidenav.fixed .collapsible {
  border: none;
  box-shadow: none;
}
.sidenav .collapsible li,
.sidenav.fixed .collapsible li {
  padding: 0;
}
.sidenav .collapsible-header,
.sidenav.fixed .collapsible-header {
  background-color: transparent;
  border: none;
  line-height: inherit;
  height: inherit;
  padding: 0 16px;
}
.sidenav .collapsible-header:hover,
.sidenav.fixed .collapsible-header:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.sidenav .collapsible-header i,
.sidenav.fixed .collapsible-header i {
  line-height: inherit;
}
.sidenav .collapsible-body,
.sidenav.fixed .collapsible-body {
  border: 0;
  background-color: #fff;
}
.sidenav .collapsible-body li a,
.sidenav.fixed .collapsible-body li a {
  padding: 0 23.5px 0 31px;
}

.collapsible.popout {
  border: none;
  box-shadow: none;
}
.collapsible.popout > li {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  margin: 0 24px;
  transition: margin 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.collapsible.popout > li.active {
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  margin: 16px 0;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Copy and paste the following into the Custom Footer Code section

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Next, we'll need to add the following to the source code of an HTML component on the page builder

HTML

<ul class="collapsible">
  <li>
    <div class="collapsible-header"><i class="material-icons">table_chart</i>Data Table</div>
    <div id="first" class="collapsible-body">&nbsp;</div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">library_add</i>Form</div>
    <div id="second" class="collapsible-body">&nbsp;</div>
  </li>
  <li>
    <div class="collapsible-header"><i class="material-icons">pie_chart</i>Chart</div>
    <div id="third" class="collapsible-body">&nbsp;</div>
  </li>
</ul>

The text table_chart, library_add, and pie_chart can be removed if you do not want the icons on the left. They can all be changed to any icon listed here https://material.io/resources/icons/

Next, after finding the ID of each component you want to place inside each collapsible accordion you may add the following to the JavaScript of that page.

$(document).ready(function(){
    $('.collapsible').collapsible();
    $('#x_element_page_4_20').appendTo('#first');
    $('#x_element_page_4_36').appendTo('#second');
    $('#x_element_page_4_38').appendTo('#third');
});