ブートストラップトグルボタンの崩壊飛行円グラフ

Question

ボタンを押したときにチャートを折りたたむブートストラップトグルボタンを追加しようとしています。私は最初にデータテーブル用の同じボタンを追加しましたが、それは機能しましたが、最初のクリックでチャートに追加したときに、チャートが収縮しているパネル、2回目のクリックでチャートを非表示、それを開く必要があります）それが開きますが、（パネルの外）縮小しています。

<div class="mypanel" id="PanelA"> 
<div class="panel panel-default"> 
    <div class="panel-body"> 
     <div class="demo-container"> 
      <div id="ChartA" class="demo-placeholder"></div> 
     </div> 
      <div class="demo-container" data-bind="visible:dataList().length>0"> 
       <br /> 
       <div class="btn-group" style="padding-right:10px; padding-left:10px"> 
        <button type="button" class="btn btn-default pull-left" data-toggle="collapse" id="BtnCA"> 
         <span class="fa fa-bar-chart" aria-hidden="true"></span> 
         <span class="btnFont">Show Chart</span> 
        </button> 
       </div> 
       <div id="ChartA-Overview" style="width: 100%; min-height:100px" class="demo-placeholder"></div> 
      </div>    
     </div> 
    </div> 
</div> 

トグルボタンが押されるたびにFLOTチャートを表示/折りたたむする方法はありますか？

Answer 1

あなたのIDには二重引用符がありません。また、divを折りたたんで開始したい場合は、class="collapse"をdivに追加することもできます。

<div id="ChartA-Overview ...

それはあなたが<button>を使用しているので、<div id="ChartA-Overview" class="collapse" ... >

なります（つまりをdata-target="ChartA-Overview"）崩壊し、展開したいのdivのIDをターゲットにdata-target属性を追加する必要があります。編集2

は時々... "ChartA-概要」+ ID（）" のようなその何か、

が、これは同上のデータバインドから来ている場合場合は、あなたがdata-target属性を追加するのdiv IDを取得するためにjQueryを使用することができます。あなたが確認するためにここにcodepenだ。

http://codepen.io/yongchuc/pen/QGLdez