Accordians are created using Bootstrap Native Accordians, they will work as the same way how it works in bootstrap, but it is styled to pages color scheme. To run a Bootstrap Accordians, there is no depencies, you do not have to include extra JS or CSS files,To add a modal to pages please reffer following guidelines
Bootstrap Accordians GuidelinePlace this HTML code in any Pages html file
<div class="panel panel-group panel-transparent" data-toggle="collapse" id=
"accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-parent="#accordion" data-toggle=
"collapse" href="#collapseOne">Collapsible Group Item</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapseOne">
<div class="panel-body">
Content Goes here
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="" data-parent="#accordion" data-toggle="collapse" href=
"#collapseTwo">Typography Variables</a>
</h4>
</div>
<div class="panel-collapse collapse in" id="collapseTwo">
<div class="panel-body">
<h4>Try Something neat</h4>
Content Goes here
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-parent="#accordion" data-toggle=
"collapse" href="#collapseThree">Easy Edit</a>
</h4>
</div>
<div class="panel-collapse collapse" id="collapseThree">
<div class="panel-body">
Content Goes here
</div>
</div>
</div>
</div>