質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

1572閲覧

モーダル内にアコーディオンを複数配置していますが、開く閉じるの矢印記号の表示がうまくいかない

kou___chan

総合スコア27

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2022/08/20 14:19

前提

phpとhtmlにてWeb社内システムを作成しております。

モーダルウィンドウ内にアコーディオンを3つ設置しております。
それぞれ動いてはおります

実現したいこと

  • アコーディオンにある開く閉じる記号の動作を正常にしたい

発生している問題・エラーメッセージ

特にありません

該当のソースコード

html、php

1. 2. 3. 4モーダル内 5### 前提 6 7phpとhtmlにてWeb社内システムを作成しております。 8 9モーダルウィンドウ内にアコーディオンを3つ設置しております。 10それぞれ動いてはおります 11 12### 実現したいこと 13 14 15- [ ] アコーディオンにある開く閉じる記号の動作を正常にしたい 16 17### 発生している問題・エラーメッセージ 18

特にありません

### 該当のソースコード ```html、php . . . モーダル内 <div class="modal-body"> <div class="accordion" id="accordionExample1"> <!--アコーディオンNo.1--> <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="false" aria-controls="collapseOne"> <span class="text-dark" style="font-size: 16px;font-weight:bold"> <font color="steelblue"><u>新規依頼登録&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;</u></font></span> </button> </h2> <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample1"> <div class="accordion-body row g-0 accordion-body-width"> ...phpプログラム内容... </div> </div> </div> <div class="accordion" id="accordionExample2"> <!--アコーディオンNo.2--> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> <span class="text-dark" style="font-size: 16px;font-weight:bold"> <font color="crimson"><u>依頼未処理一覧&emsp;&emsp;&emsp;(<?php echo sprintf("%03d", $count1-1); ?>件)&emsp;</u></font></span> </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample2"> <div class="accordion-body row g-0 accordion-body-width"> <?php foreach ((array)$db_request1 as $value1) { ?> <?php if($value1["no"]==1){ ?> <?php }else{ ?> <?php $periodDay = 3; // NEWを表示する日数 date_default_timezone_set('Asia/Tokyo'); $current = strtotime(date("Y-n-j")); ?> <?php $d = $value1['date_entered']; $d = strtotime($d . "+".$periodDay." day"); ?> <?php if($current < $d): ?> <font color="red" style="font-size: 8px;"><span class="new">NEW</span></font> <?php endif; ?> <?php } ?> ...phpプログラム内容... </div> <?php } ?> </div> </div> </div> <div class="accordion" id="accordionExample3"> <!--アコーディオンNo.3--> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <span class="text-dark" style="font-size: 16px;font-weight:bold"> <font color="gray"><u>依頼処理済一覧&emsp;&emsp;&emsp;(<?php echo sprintf("%03d", $count2); ?>件)&emsp;</u></font></span> </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample3"> <div class="accordion-body row g-0 accordion-body-width"> ...phpプログラム内容... </div> <?php } ?> </div> </div> </div> </div> </div> <div class="modal-footer"> </div> </div>

CSS内
/アコーディオン全体/
accordion{ width: 100% !important;}

試したこと

アコーディオンのclassの変更
CSSへの追記やコメントアウト

補足情報(FW/ツールのバージョンなど)

現状はモーダル表示するボタン押下により下記の様な起動画面になっております
※閉じているのに、すべて開くの記号になってしまっている
イメージ説明

希望しているモーダル起動時の画面は
イメージ説明

上記の様に起動時、閉じているところと開いているところの記号を正常に表示したい
ちなみに最初の画面の様に起動してからclickすると2枚目の画面の様に閉じる記号に変わります。
そのため最初の起動時のみ正常に表示できればと思います

かれこれ5時間くらい調べて行いましたがうまくいきません。
何とぞご教授のほど、よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

閉じておきたいアイテムのbuttoncollapsedクラスをつけておきましょう。

html

1<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">

後、下記の2行を削除してください。

html

1<div class="accordion" id="accordionExample2">

html

1<div class="accordion" id="accordionExample3">

投稿2022/08/20 15:53

編集2022/08/20 15:55
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kou___chan

2022/08/20 15:56

hatena19さん 返信ありがとうございます。 後程、検証してみます ありがとうございました
guest

0

自己解決

再度、アコーディオンの箇所を作り直しましたら何とか改善いたしました。
簡単に解決方法を記載致します。

<div class="modal-body">には <div class="accordion" id="accordionFlushExample">で単独アコーディオンを1個配置 <div class="modal-footer">には <div class="accordion" id="accordionPanelsStayOpenExample">にて2つのアコーディオンを配置しましたところ、うまく動作確認できました 下記が初期起動時の画面です。 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-21/c344e255-7983-46e0-ad52-efc4c3987f58.png)

また何かありましたら宜しくお願いいたします

投稿2022/08/20 15:48

編集2022/08/20 15:50
kou___chan

総合スコア27

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問