Q&A
前提・実現したいこと
Springboot + ThymeleafでWebページを作成する練習をしています。
ThymeleafはBootstrap4を使用して装飾をしているのですが、そのなかで使用しているアコーディオンが期待通りの動作にならないため質問させていただきました。
該当のソースコード
Bootstrap4移行ガイドを参考に作っているのですが、ここのアコーディオンについて
<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true"> <div class="card"> <div class="card-header" role="tab" id="headingOne"> <h5 class="mb-0"> <a class="text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne"> アイテム1 </a> </h5> </div><!-- /.card-header --> <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> アイテム1のコンテンツ </div><!-- /.card-body --> </div><!-- /.collapse --> </div><!-- /.card --> <div class="card"> <div class="card-header" role="tab" id="headingTwo"> <h5 class="mb-0"> <a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseTwo" role="button" aria-expanded="false" aria-controls="collapseTwo"> アイテム2 </a> </h5> </div><!-- /.card-header --> <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"> <div class="card-body"> アイテム2のコンテンツ </div><!-- /.card-body --> </div><!-- /.collapse --> </div><!-- /.card --> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseThree" role="button" aria-expanded="false" aria-controls="collapseThree"> アイテム3 </a> </h5> </div><!-- /.card-header --> <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"> <div class="card-body"> アイテム3のコンテンツ </div><!-- /.card-body --> </div><!-- /.collapse --> </div><!-- /.card --> </div><!-- /#accordion -->
上記がサンプルとして記載してありました。
試したこと
こちらを自分の使用したいようにeachで回して作成したのが下記のソースになります。
(nodesというMapの値があり、そのKey(String)をカードヘッダーに、Value(List<String>)をカードボディーに設定するといった内容になります。)
<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true"> <div th:each="node : ${nodes}" class="card"> <div class="card-header" role="tab" id="headingOne"> <h5 class="mb-0"> <a class="text-body d-block p-3 m-n3" data-toggle="collapse" href="#collapseOne" role="button" aria-expanded="true" aria-controls="collapseOne"> [[${node.key}]] </a> </h5> </div><!-- /.card-header --> <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> <a th:each="value : ${node.value}" class="dropdown-item">[[${value}]] </a> </div><!-- /.card-body --> </div><!-- /.collapse --> </div><!-- /.card --> </div>
発生している問題・エラーメッセージ
こちらで表示自体は想定通りにできているのですが、サンプルの例だと別のカードを開くと開いていたカードが閉じられていたのが、自分の作成したほうだと一つのカードを開くと他のカードも開かれてしまう&一つのカードを閉じると他のカードも閉じられてしまう。という動作をしてしまいます。
どうすれば別のカードを開くと開いていたカードが閉じられるようになるでしょうか？
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
Bootstrap4
追記
<div class="accordion" id="accordion" role="tablist" aria-multiselectable="true"> <div th:each="node, status : ${nodes}" class="card" th:with="collapseId = 'collapse' + ${status.count}"> <div class="card-header" role="tab" id="headingOne"> <h5 class="mb-0"> <a class="text-body d-block p-3 m-n3" data-toggle="collapse" th:href="'#' + ${collapseId}" role="button" aria-expanded="false" th:attr="aria-controls= ${collapseId}"> [[${node.key}]] </a> </h5> </div><!-- /.card-header --> <div th:id="${collapseId}" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> <a th:each="value : ${node.value}" class="dropdown-item">[[${value}]] </a> </div><!-- /.card-body --> </div><!-- /.collapse --> </div><!-- /.card -->
としたことでこの問題は解決できました。
ありがとうございます。
さらにもしわかれば教えていただきたいのですが
a[data-toggle="collapse"] に、 aria-expanded="false" 属性（支援技術に要素の開閉の状態を伝える）
という記載があったのでaria-expanded="false"を設定してみたのですが初期状態でアコーディオンが開かれた状態のままでした。
初期で閉じておくにはこの指定の仕方ではだめなのでしょうか？
回答1件
0
ベストアンサー
th:eachによって繰り返し出力されているアコーディオンの中で、
html
1<a ..... href="#collapseOne" ...... aria-controls="collapseOne"> 2 3<div id="collapseOne" .....>
同じ名前で繰り返して出しているのが原因です。
一番簡単なのは、このcollapseOneの値自体をThymeleafテンプレート内の th:each で生成してしまう手があります。
Thyemeleaf公式：6.2 繰り返しステータスの保持
Thymeleaf公式：9 ローカル変数
html
1<div th:each="node, status : ${nodes}" class="card" th:with="collapseId = 'collapse' + ${status.count}"> 2... 3 <a ..... th:href="'#' + ${collapseId}" ...... th:attr="aria-controls= ${collapseId}"> 4 5 <div th:id="${collapseId}" .....> 6... 7</div>
投稿2020/08/24 23:24
総合スコア12011
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/25 00:31