アコーディオンのメニュー幅を画面いっぱいまで広げたいです。

アコーディオンのメニューの中身の幅を画面いっぱいまで広げたいです。
今のままだとメニューは3分割されていていい感じですが、クリックした時に
表示される内容も画面の3分の1になってしまっているので
これを画面幅いっぱいに広げたいです。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
9</head>
10<body>
11    <div class="accordion container1" id="accordionExample">
12        <div class="row g-0">
13            <div class="col-4">
14                <div class="accordion-item">
15                    <h2 class="accordion-header" id="headingOne">
16                      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
17                        Accordion Item #1
18                      </button>
19                    </h2>
20                    <div id="collapseOne container1" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
21                      <div class="accordion-body row g-0 accordion-body-width">
22                        <strong class="col-12">This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
23                      </div>
24                    </div>
25                </div>
26            </div>
27            <div class="col-4">
28                <div class="accordion-item">
29                    <h2 class="accordion-header" id="headingTwo">
30                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
31                        Accordion Item #2
32                      </button>
33                    </h2>
34                    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
35                      <div class="accordion-body acordion-body-width">
36                        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
37                      </div>
38                    </div>
39                  </div>
40            </div>
41            <div class="col-4">
42                <div class="accordion-item">
43                    <h2 class="accordion-header" id="headingThree">
44                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
45                        Accordion Item #3
46                      </button>
47                    </h2>
48                    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
49                      <div class="accordion-body">
50                        <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
51                      </div>
52                    </div>
53                </div>
54            </div>
55        </div>
56      </div>
57
58
59      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
60</body>
61</html>

css
1.accordion-body-width {
2  width: 100%;
3}

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

回答2件

ベストアンサー

.accordion-collapseを.col-4の外に出してしまうのが手っ取り早いかと思います。

投稿2021/05/08 06:56

Lhankor_Mhy

総合スコア36115

Larkiwing

2021/05/08 07:13

回答ありがとうございます。 <div class="accordion-collapse"> <div class="col-4"> 　　　　　　　～～～～～＜/div＞ </div> にしてみましたが、うまく動きません。もしくは僕の解釈が間違っているのでしょうか？

Lhankor_Mhy

2021/05/08 07:14

.accordion-collapseと.col-4を兄弟にするということです。

Larkiwing

2021/05/08 07:33

ありがとうございます。こういうことですね。 <div class="col-4"> ～～～～ </div> <div class="accordion-collapse"> ~~~ </div>

Lhankor_Mhy

2021/05/08 07:44

そうですね。上手くいきませんか？

Larkiwing

2021/05/08 07:55

画面幅いっぱいにはなるのですが、Accordion Item #１やAccordion Item #2を押すと残りのメニューが落ちてしまいます。多分どっかをいじると落ちないはずなので、ググッています。なにかわかりますか？

Lhankor_Mhy

2021/05/08 08:02

落ちるとは何ですか？

Larkiwing

2021/05/08 08:07

画像を貼り付けました。 Accordion Item #2を押すとAccordion Item #３が落ちます。

Lhankor_Mhy

2021/05/08 08:11

.accordion-collapseを.col-4と.col-4の間に置いているのではないですか？

Larkiwing

2021/05/08 08:18

今この状態ですが、ちゃんと並べてあります。いかがでしょうか？ <div class="accordion container1" id="accordionExample"> <div class="row g-0"> <div class="col-4"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion Item #1 </button> </h2> </div> </div> <div id="collapseOne container1" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body row g-0 accordion-body-width"> <strong class="col-12">This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> <div class="col-4"> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion Item #2 </button> </h2> </div> </div> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body acordion-body-width"> <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> <div class="col-4"> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Accordion Item #3 </button> </h2> </div> </div> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div> </div> </div> </div>

Lhankor_Mhy

2021/05/08 08:35

.accordion-collapseが.col-4と.col-4の間に入ってしまっていますね。 .col-4 .col-4 .col-4 .accordion-collapse .accordion-collapse .accordion-collapse という構造にしてはいかがですか？

Larkiwing

2021/05/08 08:40

あーなるほど。僕の解釈が間違っていましたね。 .col-4 .accordion-collapse .col-4 .accordion-collapse .col-4 .accordion-collapse で3セットなので問題ないと思っていましたが、問題アリですね。できました。ありがとうございました。

Lhankor_Mhy

2021/05/08 08:46

お役に立てたようで何よりです。

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

解決方法

既にベストアンサーは出ていますが、自分用にコードと解説を書きます。

①Lhankor_Mhyさんからご指摘を頂いている通り、.accordion-collapseを.col-4と.col-4の間に置くとデザインが崩れるのでダメです。

②なので、.accordion-collapseと.col-4は別々に書きます。

③それからcontainer1という不要なクラスが2か所に入っているのでそちらは削除。
でOk.

コード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
9</head>
10<body>
11    <div class="accordion" id="accordionExample">
12        <div class="row g-0">
13            <div class="col-4">
14                <div class="accordion-item">
15                    <h2 class="accordion-header" id="headingOne">
16                      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
17                        Accordion Item #1
18                      </button>
19                    </h2>
20                </div>
21            </div>
22            <div class="col-4">
23                <div class="accordion-item">
24                    <h2 class="accordion-header" id="headingTwo">
25                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
26                        Accordion Item #2
27                      </button>
28                    </h2>
29                </div>
30            </div>
31            <div class="col-4">
32                <div class="accordion-item">
33                    <h2 class="accordion-header" id="headingThree">
34                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
35                        Accordion Item #3
36                      </button>
37                    </h2>
38                </div>
39            </div>
40            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
41                <div class="accordion-body row g-0 accordion-body-width">
42                    <strong class="col-12">This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
43                </div>
44            </div>
45            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
46                <div class="accordion-body acordion-body-width">
47                  <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
48                </div>
49            </div>
50            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
51                <div class="accordion-body">
52                  <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
53                </div>
54            </div>
55        </div>
56      </div>
57
58
59      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
60</body>
61</html>