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"> </div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">library_add</i>Form</div>
<div id="second" class="collapsible-body"> </div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">pie_chart</i>Chart</div>
<div id="third" class="collapsible-body"> </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');
});