DIVタグ内でブートストラップカラムのプロパティを切り替える

Question

divタグ内でブートストラップクラスのプロパティを交換しようとしてきました。私はブートストラップ12の列グリッドをフルに活用したいが、12の列を1つの9列と3列のレイアウトに切り替える。ここに例があります：

ここにはJDFIDDLE DEMOがあります。このサンプルコード：

<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
    <div id="LeftColumn" class="col-md-9 col-sm-9 col-xs-12"> 
    <h3>Left Column</h3> 
    <p>Currently is set to col-md-9, but it should initially be col-md-12 and be toggled to col-md-9 while maintining the its responsive properties.</p> 
    <p><span class="strong">DESIRED RESULT:</span>Toggle the properties &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt; to &lt;div class="col-md-9 col-sm-9 col-xs-12"&gt; when the "Toggle Right" column button is clicked while maintaining the existing functionality.</p> 
    </p> 
    <div id="Bar" class="main-container collapse in"> 
     <a href="#Foo" class="btn btn-success" data-toggle="collapse">Toggle Right</a> 
    </div> 
    <div class="clearfix"></div> 
    <br /> 
    </div> 
    <div id="RightColumn" class="col-md-3 col-sm-3 col-xs-12"> 
    <div id="Foo" class="main-container collapse" style="border: dotted 1px green;"> 
    Toggle Left Column <a href="#Bar" class="btn btn-warning" data-toggle="collapse"><i class="fa fa-bars"></i></a>Additional content will be displayed in this column once triggered. 
     <div style="height: 150px;"></div> 
    </div> 
    </div> 
</div> 

は、私は、既存のボタンに代わって、すでに「トグル右」と「左切り替え」ボタンをトグル機能を維持する必要があります。

RightColumnとLeftColumnの両方で12（col-md-12）から9（col-md-9）と3（col-md-3）に切り替えるための助けに感謝します。 。

Answer 1

Js/Jqueryを使用してこれを行うことができます。最初の左側の列がcol-md-12に設定されていると仮定して、右ボタンをトグルするコードを更新しました。トグルボタンのOnclickでは、好きなようにクラスを追加または削除できます。更新されたコードは以下のようになりました。
`

<div class="container-fluid col-lg-12 border-red"> 
<div class="col-lg-12 align-center"><h3>Sample Table</h3></div> 
    <div class="col-md-12 col-sm-12 border-black align-center"> 
    Right Column Full 12 Columns (col-md-12) before triggering Toggle button. 
    </div> 
    <div class="clearfix"></div> 
    <div class="col-md-9 col-sm-9 col-xs-12 border-green">Main Container (col-md-9) after toggle button is clicked should still maintain its responsiveness properties.<br /></div> 
    <div class="col-md-3 col-sm-3 col-xs-12 border-blue">Toggle Right Column<br />(col-md-3)</div> 
</div> 

<hr /> 

<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
     <div id="LeftColumn" class="col-md-12 col-sm-12 col-xs-12"> 
     <h3>Left Column</h3> 
     <p>Currently is set to col-md-9, but it should initially be col-md-12 and be toggled to col-md-9 while maintining the its responsive properties.</p> 
     <p><span class="strong">DESIRED RESULT:</span>Toggle the properties &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt; to &lt;div class="col-md-9 col-sm-9 col-xs-12"&gt; when the "Toggle Right" column button is clicked while maintaining the existing functionality.</p> 

     <div id="Bar" class="main-container collapse in"> 
      <a href="#Foo" class="btn btn-success" data-toggle="collapse" id ="toggle-right">Toggle Right</a> 
     </div> 
     <div class="clearfix"></div> 
     <br /> 
     </div> 
     <div id="RightColumn" class="col-md-3 col-sm-3 col-xs-12"> 
     <div id="Foo" class="main-container collapse" style="border: dotted 1px green;"> 
     Toggle Left Column <a href="#Bar" class="btn btn-warning" data-toggle="collapse"><i class="fa fa-bars"></i></a>Additional content will be displayed in this column once triggered. 
      <div style="height: 150px;"></div> 
     </div> 
     </div> 
    </div>` 

アップデートjsのコードは、あなたの更新JsFiddleがhereある

$(".main-container.collapse").on('shown.bs.collapse', function() { 
    //when a collapsed div is shown hide all other collapsible divs that are visible 
    $(".main-container.collapse").not($(this)).collapse('hide'); 
}); 
$('#toggle-right').click(function(e) { 
var left = $('#LeftColumn'); 
if(left.hasClass('col-md-9')) 
{ 
left.removeClass("col-md-9 col-sm-9").addClass("col-sm-12 col-md-12"); 
} 
else 
{ 
left.removeClass("col-md-12 col-sm-12").addClass("col-sm-9 col-md-9"); 
} 
}) 

を下回っています。これに基づいて、左のトグルボタンを追加することもできます。

Answer 2

あなたの質問を正しく理解している場合は、特定のdivがclass="col-md-12 col-sm-12 col-xs-12"とclass="col-md-9 col-sm-9 col-xs-12"のボタンをクリックして切り替えることができますか？

が、これは、あなたがこのような何かをするためにjQueryを使用することができます実行します。ほとんど

$("#button-id").click(function(){ 
    if ($("#div-to-change").hasClass("col-md-12")) { 
    $("#div-to-change").removeClass("col-md-12 col-sm-12").addClass("col-md-9 col-sm-9"); 
    } else { 
    $("#div-to-change").removeClass("col-md-9 col-sm-9").addClass("col-md-12 col-sm-12"); 
    } 
});