How to add a collapsible area

Collapsible area a popular feature that can be added using custom code to any screen within Fliplet. 

To add collapsible areas please add the following code into the Developer Options:

HTML code

First, close the existing '<section

To add 2 collapsible areas to a screen use the following code:

</section>
<!-- begin accordion -->
<!-- update the 'collapse1' href and id to be unique so other accordions do not open -->
<div class="panel-group">
<div class="panel panel-default">
<a data-toggle="collapse" href="#collapse1" class="panel-heading panel-title collapsed" aria-expanded="false" data-fl-edit>Collapsible panel</a>
<div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body" data-fl-edit>
<p>Panel Body</p>
</div>
</div>
</div>
<div class="panel panel-default">
<a data-toggle="collapse" href="#collapse2" class="panel-heading panel-title collapsed" aria-expanded="false" data-fl-edit>Collapsible panel</a>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body" data-fl-edit>
<p>Panel Body</p>
</div>
</div>
</div>
</div>
<!-- end accordion -->

CSS code

To style the accordion add this CSS code to each screen using the accordion code:

/* adds the arrow to the accordion heading */
.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}
/* animates the arrow*/
.panel-heading.active a:before {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
} 
/* sets the top of the accordion to be a fixed size */
.panel-default > .panel-title {
  display:block;
}

JavaScript code

To enable a spinning animation for the arrow when the accordion is opened or closed, add this Javascript code to each screen using the accordion:

Fliplet.Navigator.onReady().then(function(){
  // Use the Fliplet.Navigator.onReady() promise to ensure
  // dependencies are loaded before executing custom code
  
  //Used to add or remove the animation to the arrow
  $('.panel-collapse').on('show.bs.collapse', function () {
    $(this).siblings('.panel-heading').addClass('active');
  });

  $('.panel-collapse').on('hide.bs.collapse', function () {
    $(this).siblings('.panel-heading').removeClass('active');
  });
});

Further documentation about accordions or collapsible areas can be found at https://getbootstrap.com/docs/3.3/javascript/#collapse