Bootstrap nested multi-collapse accordion, remove active state

Question

I have a multi-collapse accordion and I am trying to put another multi-collapse accordion within one of the panels.

When I toggle the panel and the nested accordion appears, all the panels are already in the active state.

I would like the nested accordion to not be in the active state (blue with ‘ – ‘ ) but have all the panels in the gray color with a ‘ + ‘ icon visible.

Here is an example with code

Thanks for your suggestions.

<div class="panel-group multi-collapse" id="accordion1">

      <div class="panel panel-default">
          <div class="panel-heading">
            <div class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">NEWS 1</a>
            </div>
          </div>
          <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">

                <!-- Here is nested accordion -->

            <div class="panel-group multi-collapse" id="accordion2">

              <div class="panel panel-default">
                <div class="panel-heading">
                  <div class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseNested1">
                    News 1 Heading
                  </a></div>
                </div>
                <div id="collapseNested1" class="panel-collapse collapse">
                  <div class="panel-body">
                    News 1a Text ...
                  </div>
                </div>
              </div>

              <div class="panel panel-default">
                <div class="panel-heading">
                  <div class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseNested2">
                    News 2 Heading
                  </a></div>
                </div>
                <div id="collapseNested2" class="panel-collapse collapse">
                  <div class="panel-body">
                    News 2a Text ...
                  </div>
                </div>
              </div>

              </div>

            <!-- Inner accordion ends here -->

            </div>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading">
            <div class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapse2">NEWS 2</a></div>
          </div>
          <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">
                News 2 Text ...
            </div>
          </div>
          </div>

      </div>

Answer 1

Mark.. add > sing after active class in style.css line 2101 like this

 /* line 1658, ../sass/_typography.scss */
.panel-group .panel.active > .panel-heading > .panel-title > a:after,
.panel-group .panel.active > .panel-heading > .panel-title > a:hover:after {
  display: none;
}