ブートストラップを持つ展開可能なdivs

Question

私の問題はHTMLの構造上、1つのdivが展開されると行全体が下に移動するという問題があります。私はこれのための修正を見つけるのに少し苦労している。私はここを見ましたが、解決策を見つけることができませんでした。どんなアイデアも素晴らしいだろう。これは私の構造体である（DIV 1は、問題の性質を示すように拡張して）：あなたは私がこれを行うことをお勧めブートストラップ崩壊を使用しないで述べたように

expandable div 1 | expandable div 2 
        | 
        | expandable div 4 
        | 
expandable div 3 | 

---

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-6"> 
     <div class="panel panel-primary"> 
      expandable div 1 
     </div> 
    </div> 
    <div class="col-xs-12 col-sm-6"> 
     <div class="panel"> 
      expandable div 2 
     </div> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col-xs-12 col-sm-6"> 
     <div class="panel"> 
      expandable div 3 
     </div> 
    </div> 
    <div class="col-xs-12 col-sm-6"> 
     <div class="panel"> 
      expandable div 4 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

jQuery（以下の例を参照）。

あなたHTML：今

<div class="container"> 
    <div class="header"><span>Expand</span> 

    </div> 
    <div class="content" style="display: none;"padding : 10px;> 
     Suprise! 
    </div> 
</div> 

jQuery：

$(".header").click(function() { 

    $header = $(this); 

    $content = $header.next(); 

    $content.slideToggle(300, function() { 

     $header.text(function() {    
      return $content.is(":visible") ? "Collapse" : "Expand"; 
     }); 
    }); 

}); 

このような何かが動作します。

スタイル表示にはCSSを考えてください。