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
Chris Cannon
Comments