ブートストラップは、私は2つのdiv要素を持っている

Question

を左右にクリックでコンテナのサイズを変更...

<div class="row">  
    <div id="general" class="col-sm-4"> 
     <p>General content.</p> 
     <p id="show">Open extra content.</p> 
    </div> 
    <div id="extra" class="alert alert-info col-sm-8"> 
     <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>    
     <p>Here is the extra content!</p> 
    </div> 
</div> 

一般的なコンテンツのdivが常に表示されるはず、と#show段落をクリックしたときに余分なコンテンツのdivが表示されるはずです。

ご覧のとおり、一般的なdivはページの1/3で、余分なdivはページの2/3です（開いたとき）。

私は

...一般のdivは、余分なdiv要素が閉じているときに、ページの幅全体を記入し、それがこのように振る舞う作り、開いているときにususal 1/3を埋めたいです

jQuery/Javascript/CSS3でどうすればいいですか？

Answer 1

div #generalクラスを変更すると解決したら、それを解決してください。 最初に#extraが閉じたとき、#generalをclass="col-sm-12"に設定してこのコードを使用します。

$("#general").click(function(){ 
    $(this).toggleClass('col-sm-12 col-sm-4'); 
    $("#extra").show(); 
}); 

#extraを閉じると、このコードを再度使用することができます。

Answer 2

最初にcol-sm-12クラスを#generalに追加して、完全に表示され、hideクラスの#extra divを非表示にします。次に、ボタンをクリックし、jqueryでクラスをスワップして#extra divを表示します。

$("#show").on('click',function(){ 
    if($("#extra").hasClass('hide')){ 
     // in case its already hidden 
     $("#general").removeClass('col-sm-12').addClass('col-sm-4'); 
     $("#extra").removeClass('hide').addClass("show"); 
    } else { 
     // in case its already visible 
     $("#general").removeClass('col-sm-4').addClass('col-sm-12'); 
     $("#extra").removeClass('show').addClass("hide"); 
    } 
});