アコーディオンのヘッダーセクション全体をクリック可能にする

Question

現在、このようなアコーディオンを使用しています。グリフコンの矢印をクリックすると、展開/折りたたむことができます。 ：http://www.bootply.com/1fDNAjGFrJ

$('[data-toggle="collapse"]').click(function() { 
 
    $(this).children(".glyphicon").toggleClass("glyphicon-chevron-up glyphicon-chevron-down"); 
 
});

<div class="container"> 
 
    <div class="panel-group" id="accordionMessagesSetup"> 
 
    <div class="panel panel-default"> 
 
     <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup"> 
 
         <span class="glyphicon glyphicon-chevron-up"></span> 
 
         Message Setup 
 
        </a> 
 
     </h4> 
 
     </div> 
 
     <div id="collapseMessagesSetup" class="panel-collapse collapse in"> 
 
     <div> 
 
      Actual Content goes here 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

クリッカブルエリアには、現在ちょうどそのアイコンです。 panel-titleセクション全体を拡大するにはどうすればクリック可能？

Answer 1

blockディスプレイを持っているパネルのタイトルのためのアンカーを作るためにこれを追加します。例えば

、

.panel-title a { 
    display: block; 
} 

WORKING LINK

は、この情報がお役に立てば幸いです。

Answer 2

はちょうどあなたのCSS

.accordion-toggle{ 
    display: block; 
} 

Answer 3

だけのシンプルなCSSの場合、aはblockこととタイトルを埋めるためにpaddingを使用してみましょう：

.accordion-toggle { 
    display: block; 
    padding: 10px 15px; 
} 

.panel-heading { 
    padding: 0; 
}