Accordians


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 Guideline

jQuery users

Place 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>

AngularJS users

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a ng-class="{collapsed:!collapseOne}" ng-click="collapseOne=!collapseOne" aria-expanded="true" aria-controls="collapseOne">
                 Item 1
                </a>
            </h4>
        </div>
        <div class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" ng-class="{in:collapseOne}">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" ng-class="{collapsed:!collapseTwo}" ng-click="collapseTwo=!collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Item 2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo" ng-class="{in:collapseTwo}">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed" ng-class="{collapsed:!collapseThree}" ng-click="collapseThree=!collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  Item 3
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree" ng-class="{in:collapseThree}">
            <div class="panel-body">
                ...
            </div>
        </div>
    </div>
</div>