トグル可能なコンテンツの残りの高さを取る

Question

私はある量のカラムを持ち、各カラムをクリックすると、そのカラムの内容が以下に示されます。トグル可能なコンテンツが表示されているときに残りの高さを使用してレイアウトが反応するようにするにはどうすればよいですか？それはCSSでのみ可能か、jsも使う必要がありますか？

$(document).ready(function() { 
 
    $('.column').on('click', function(e) { 
 
    $(this).find('.content').toggle(); 
 
    $(this).toggleClass('active', 400); 
 
    }); 
 
});

#wrapper { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    width: 100%; 
 
    color: #000; 
 
    left: 0; 
 
    top: auto; 
 
    display: none; 
 
    text-align: left; 
 
    border: 1px solid #000; 
 
} 
 

 
.column { 
 
    display: inline-block; 
 
    border: 1px solid #000; 
 
    width: 20%; 
 
} 
 

 
.column.active { 
 
    margin-bottom: 100px; 
 
} 
 

 
.toggle { 
 
    width: 25%; 
 
    height: 64px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="column"> 
 
    <div class="toggle">1</div> 
 
    <div class="content"> 
 
     <p>content 1</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="column"> 
 
    <div class="toggle">2</div> 
 
    <div class="content"> 
 
     <p>content 2</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="column"> 
 
    <div class="toggle">3</div> 
 
    <div class="content"> 
 
     <p>content 3</p> 
 
    </div> 
 
    </div> 
 
</div>

私は私がこれまで何をやったかのfiddleを作成しました。

Answer 1

私はあなたを正しく理解しています。あなたは一種のaccordeonを作りたいと思っています。あなたには4つのタブがあります。 1つを開くと、テキストが表示されます。 uをもう1つクリックすると、その1つを開き、前の1つを閉じて、そのheigtに留まります。

これが完璧に動作するには、javascriptまたはjsfiddleなどが必要です。

これが問題だった場合。 Googleのようなもの： "どのようにaccordeonメニューを作る"。 この純粋なCSSを行う方法があるかもしれませんが、それについてはわかりません。

申し訳ありませんあなたの問題ではなかった場合

Answer 2

これは何ですか？

$(document).ready(function() { 
 
    $('.column').on('click', function(e) { 
 
    $(this).find('.content').toggle(); 
 
    $(this).toggleClass('active', 400); 
 
    }); 
 
});

#wrapper { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    width: 100%; 
 
    color: #000; 
 
    left: 0; 
 
    top: auto; 
 
    display: none; 
 
    text-align: left; 
 
    border: 1px solid #000; 
 
    height: calc(100vh - 100px); 
 
} 
 

 
.column { 
 
    display: inline-block; 
 
    border: 1px solid #000; 
 
    width: 20%; 
 
} 
 

 
.column.active { 
 
    margin-bottom: 100px; 
 
} 
 

 
.toggle { 
 
    width: 25%; 
 
    height: 64px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="column"> 
 
    <div class="toggle">1</div> 
 
    <div class="content"> 
 
     <p>content 1</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="column"> 
 
    <div class="toggle">2</div> 
 
    <div class="content"> 
 
     <p>content 2</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="column"> 
 
    <div class="toggle">3</div> 
 
    <div class="content"> 
 
     <p>content 3</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

• 列の列+高さのオフセットから（$（ウィンドウ）.height（））ウィンドウの高さを差し引く使用可能なスペースを取得します。
• アクティブな列のマージンボトムを、2列目の列を押し下げるために使用可能なスペース（availSpace）に設定します。

EDIT： あなたは「.content」の後、設定高さ、単に利用可能なスペースを見つけるために、VAR（availSpace）を削除し、ビューポートを埋めるために「.content」をしたくない場合は（myContent.height ）コラム

$(document).ready(function(){ 
 
    $('.column').on('click', function(){ 
 
    \t $("#wrapper").find (".column").css ({"margin-bottom": 0}); 
 
     $("#wrapper").find (".content").css ({"display": "none"}); 
 
     
 
     var myContent = $(this).find('.content'); 
 
     // var availSpace = $(window).height() - ($(this).offset().top + $(this).height()); 
 
     
 
    \t myContent.addClass('active'); 
 
     myContent.css ({"display": "inline-block"}); 
 
     $(this).css ({"margin-bottom": myContent.height()}); 
 
    \t }); 
 
});

#wrapper { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    width: 100%; 
 
    color: #000; 
 
    left: 0; 
 
    top: auto; 
 
    display: none; 
 
    text-align: left; 
 
    border: 1px solid #000; 
 
} 
 

 
.column { 
 
    display: inline-block; 
 
    border: 1px solid #000; 
 
    width: 20%; 
 
} 
 

 

 
      
 
.toggle { 
 
    width: 25%; 
 
    height: 64px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="column"> 
 
     <div class="toggle">1</div> 
 
     <div class="content">  
 
      <p>content 1</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     <div class="toggle">2</div> 
 
     <div class="content"> 
 
      <p>content 2<br> 
 
      content 2</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     <div class="toggle">3</div> 
 
     <div class="content"> 
 
      <p>content 3</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     <div class="toggle">4</div> 
 
     <div class="content"> 
 
      <p>content 4</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     <div class="toggle">5</div> 
 
     <div class="content"> 
 
      <p>content 5</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     <div class="toggle">6</div> 
 
     <div class="content"> 
 
      <p>content 6</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="column"> 
 
     <div class="toggle">7</div> 
 
     <div class="content"> 
 
      <p>content 7</p> 
 
     </div> 
 
    </div> 
 
</div>