Bootstrapのアコーディオンパネルを開くときに色を変える。

アコーディオンパネルを作成しました。
その際、こちらの記事を参考にさせて頂きました！
Bootstrap3 アコーディオンとCollapseの簡単な使い方 | Designup

どうせアコーディオンにするなら、開くときに色とか変えたいので作ってみました。
パネルを開くときに、動的にクラスをpanel-defaultからpanel-infoに変えることで色を変えています。
パネルを閉じる時は逆のことをしています。

デモはこちらです。
Bootstrapのアコーディオンパネルを開くときに色を変える：デモページ

以下、ソースコードです。

HTML

<div class="panel-group" id="accordion">
	<!-- アコーディオン1 -->
    <div class="panel panel-default">
      <div class="panel-heading pointer" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        <h4 class="panel-title">クリックしてね　その１</h4>
      </div>
    
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
			開きました　その１
        </div>
      </div>
    </div>

    <!-- アコーディオン2 -->
    <div class="panel panel-default">
      <div class="panel-heading pointer" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        <h4 class="panel-title" >クリックしてね　その２</h4>
      </div>
      
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">
         	開きました　その２
        </div>
      </div>
    </div>
</div>

JavaScript

$('.collapse').on({
	'show.bs.collapse': function () {
		//アコーディオンのタイトルバーの色を変更
		$(this).parent('.panel').removeClass('panel-default')
		$(this).parent('.panel').addClass('panel-info');
	},
	'hide.bs.collapse': function () {
  		//タイトルバーの色を戻す
  		$(this).parent('.panel').addClass('panel-default')
		$(this).parent('.panel').removeClass('panel-info');
	}
})