grid（或いはflex）レイアウト＋横アコーディオンの合わせ技について

前提

下記イメージ図のように2カラム目のB-1をクリックするとC1〜C3が3カラム目として出現するコンテンツの実装を考えております。

実現したいこと

B-1を再度クリックすると3カラム目が非表示になり元に戻る
B-2をクリックするとC1〜C3ではなく新たにC4〜C6が表示される
3カラム目出現時は1,2カラム目のwidthはその分縮小される（全体の幅は同じ）

の挙動も取り入れたく、当初はgrid（或いはflex）＋アコーディオンの合わせ技でいけるかと実装を進めておりましたが、なかなかうまい組み合わせが思いつかず今に至る状態です。

疎い質問で恐れ入りますが何卒よろしくお願い申し上げます。

行動規範の内容に同意します

回答1件

ベストアンサー

flex で実装してしみました。

html
1<div class="container">
2  <div class="main box">A</div>
3  <div class="main">
4    <div class="box b1">B-1</div>
5    <div class="box b2">B-2</div>
6  </div>
7  <div class="side1">
8    <div class="box">C-1</div>
9    <div class="box">C-2</div>
10    <div class="box">C-3</div>  
11  </div>
12  <div class="side2">
13    <div class="box">C-4</div>
14    <div class="box">C-5</div>
15    <div class="box">C-6</div>  
16  </div>
17</div>

css
1.container {
2  display: flex;
3  height: 200px;
4  gap: 5px;
5}
6.main {
7  width: 50%;
8  display: flex;
9  flex-direction: column;
10  gap: 5px;
11}
12.box {
13  border: solid 1px;  
14}
15.b1, .b2 {
16  height: 50%;
17}
18.side1, .side2 {
19  width: 0px;  
20  overflow: hidden;
21  display: flex;
22  flex-direction: column;
23  gap: 5px;
24  flex-shrink: 0;
25  transition: .5s;
26}
27.side1 .box, .side2 .box {
28  white-space: nowrap;
29  height: 50px;
30}
31.side1.open, .side2.open {
32  width: 30%;
33}

JavaScript/JQuery
1$(".b1").click(() => {
2  $(".side1").toggleClass("open");
3  $(".side2.open").removeClass("open");
4})
5$(".b2").click(() => {
6  $(".side2").toggleClass("open");
7  $(".side1.open").removeClass("open");
8})