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

Question

前提

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

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

実現したいこと

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

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

特にありません

該当のソースコード

.
.
.
モーダル内
### 前提

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

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

### 実現したいこと


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

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

特にありません

### 該当のソースコード

```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時間くらい調べて行いましたがうまくいきません。
何とぞご教授のほど、よろしくお願いいたします。

Answer 1

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

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

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

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

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

Comments

[kou___chan]

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

Answer 2

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

<div class="modal-body">には <div class="accordion" id="accordionFlushExample">で単独アコーディオンを1個配置 <div class="modal-footer">には <div class="accordion" id="accordionPanelsStayOpenExample">にて2つのアコーディオンを配置しましたところ、うまく動作確認できました 下記が初期起動時の画面です。 

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