From 93c226aef61143aada32e33008ea447525d825d6 Mon Sep 17 00:00:00 2001
From: Henrik Hautakoski <henrik.hautakoski@gmail.com>
Date: Tue, 2 Aug 2022 14:52:37 +0200
Subject: [PATCH] app/views/main/callback/show.volt: fix collapse

---
 app/views/main/callback/show.volt | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/app/views/main/callback/show.volt b/app/views/main/callback/show.volt
index 4eff21c..4016520 100644
--- a/app/views/main/callback/show.volt
+++ b/app/views/main/callback/show.volt
@@ -5,14 +5,14 @@
         <h6 class="float-end"><strong>Created at:</strong> {{ item.created_at }}</h6>
     </div>
 
-    <div class="panel-group request-list" id="request-list" role="tablist" aria-multiselectable="true">
+    <div class="panel-group request-list" id="request-list">
 
         {% for index, req in page.items %}
 
         <div class="panel request-list-item">
             <a id="request-item-head-{{ index }}" class="request-list-item-header collapsed"
-               href="#request-item-body-{{ index }}" aria-controls="request-item-body-{{ index }}"
-               data-parent="#request-list" data-toggle="collapse"  aria-expanded="true" >
+               href="#request-item-body-{{ index }}" role="button" aria-controls="request-item-body-{{ index }}"
+               data-bs-toggle="collapse" aria-expanded="true" >
 
                 <div class="request-list-item-header-row">
 
@@ -46,20 +46,19 @@
                 </div>
             </a>
 
-            <div id="request-item-body-{{ index }}" class="collapse"
-                 role="tabpanel" aria-labelledby="request-item-head-{{ index }}">
+            <div id="request-item-body-{{ index }}" class="collapse" data-bs-parent="#request-list">
 
                 <div class="request-list-item-detail">
 
                     {% if req.getUriQuery()|length > 0 %}
 
-                    <button class="request-list-item-detail-button" type="button"
-                            data-toggle="collapse" data-target="#request-list-item-detail-query-{{ index }}"
+                    <button class="request-list-item-detail-button" type="button" role="button"
+                            data-bs-toggle="collapse" data-bs-target="#request-list-item-detail-query-{{ index }}"
                             aria-expanded="false" aria-controls="request-list-item-detail-query-{{ index }}">
                         Query
                     </button>
 
-                    <div id="request-list-item-detail-query-{{ index }}" class="collapse in">
+                    <div id="request-list-item-detail-query-{{ index }}" class="collapse show">
                         <table class="request-list-item-detail-headers">
                             <thead>
                             <tr>
@@ -81,7 +80,7 @@
                     {% endif %}
 
                     <button class="request-list-item-detail-button" type="button"
-                            data-toggle="collapse" data-target="#request-list-item-detail-headers-{{ index }}"
+                            data-bs-toggle="collapse" data-bs-target="#request-list-item-detail-headers-{{ index }}"
                             aria-expanded="false" aria-controls="request-list-item-detail-headers-{{ index }}">
                         Headers
                     </button>
@@ -106,7 +105,7 @@
                     </div>
 
                     <button class="request-list-item-detail-button" type="button"
-                            data-toggle="collapse" data-target="#request-list-item-detail-body-{{ index }}"
+                            data-bs-toggle="collapse" data-bs-target="#request-list-item-detail-body-{{ index }}"
                             aria-expanded="false" aria-controls="request-list-item-detail-body-{{ index }}">
                         Body
                     </button>