Estoy usando Bootstrap 3 y tratando de configurar la siguiente estructura de acordeón / contracción:

Carga: cada panel de acordeón en un grupo está totalmente colapsado y funciona como se documenta / espera.

Haga clic en el botón: cada panel de acordeón se expande y hacer clic en los conmutadores no tiene ningún efecto (incluidos los efectos de anclaje de URL)

Otro clic del botón: Todos los paneles regresan al estado de carga; todo colapsado y se puede hacer clic como de costumbre.

Llegué al paso 2, pero cuando vuelvo a hacer clic en el botón 3, no tiene ningún efecto. Tampoco veo errores de consola reportados en Chrome Dev Tools o ejecutando el código a través de mi JSHint local.

Me gustaría que este ciclo fuera repetible cada vez que se haga clic en el botón.

He configurado mi código aquíhttp://bootply.com/98140 y aquíhttp://jsfiddle.net/A9vCx/

Me encantaría saber qué estoy haciendo mal y agradezco las sugerencias. ¡Gracias!

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

Mi 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');
    }
  });

});