Estou usando o Bootstrap 3 e tentando configurar a seguinte estrutura de acordo / colapso:

Onload: Cada painel de acordeão em um grupo é totalmente recolhido e funciona como documentado / esperado.

Botão de clique: Cada painel de acordeão se expande e clicando no botão de alternância não tem efeito (incluindo efeitos de âncora de URL).

Outro clique no botão: Todos os painéis retornam ao estado onload; todos colapsados ​​e clicáveis ​​normalmente.

Eu cheguei no passo 2, mas quando eu clico no botão novamente no passo 3, ele não tem efeito. Também não vejo erros do console informados no Chrome Dev Tools ou executando o código por meio do JSHint local.

Eu gostaria que este ciclo fosse repetido toda vez que o botão fosse clicado.

Eu configurei meu código aquihttp://bootply.com/98140 e aquihttp://jsfiddle.net/A9vCx/

Eu adoraria saber o que estou fazendo de errado e aprecio sugestões. Obrigado!

Meu HTML:

<button class="collapse-init">Click to disable accordion behavior</button>
<br><br>
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

Meu JS:

$(function() {

  var $active = true;

  $('.panel-title > a').click(function(e) {
    e.preventDefault();
  });

  $('.collapse-init').on('click', function() {
    if(!$active) {
      $active = true;
      $('.panel-title > a').attr('data-toggle', 'collapse');
      $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
      $(this).html('Click to disable accordion behavior');
    } else {
      $active = false;
      $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
      $('.panel-title > a').removeAttr('data-toggle');
      $(this).html('Click to enable accordion behavior');
    }
  });

});