Bootstrap nested Accordion + Font-Awesome icons

http://stackoverflow.com/q/37882237/ http://stackoverflow.com/q/38037274/

by Ayyappan Sakthivadivel

HTML

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-1">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
          Item 1
        </a>
      </h4>
    </div>
    <div id="collapse-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1">
      <div class="panel-body">

        <div class="panel-group" id="accordion-1" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading-1-1">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
                  Item 1 > 1
                </a>
              </h4>
            </div>
            <div id="collapse-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1">
              <div class="panel-body">

                  <div class="panel-group" id="accordion-1-1" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                      <div class="panel-heading" role="tab" id="heading-1-1-1">
                        <h4 class="panel-title">
                          <a role="button" data-toggle="collapse" data-parent="#accordion-1-1" href="#collapse-1-1-1" aria-expanded="false" aria-controls="collapse-1-1-1">
                            Item 1 > 1 > 1
                          </a>
                        </h4>
                      </div>
                      <div id="collapse-1-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1-1">
                        <div class="panel-body">
                          Text 1 > 1 > 1
   ...

CSS

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

.panel-title > a {
  display: block;
  position: relative;
}
.panel-title > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.panel-title > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}