Skip to main content

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.

Copy and paste the following in the Custom Header Code Section
<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

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');
});
Back to top