diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt
index b24aaf2a32..293b8f7e82 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/letter.tt
@@ -568,102 +568,96 @@
     [% END %]
 
 [% BLOCK message_templates %]
-    <div class="panel-group" id="group_[% lang | html %]" role="tablist" aria-multiselectable="true">
+    [% WRAPPER accordion id="group_${lang}" %]
         [% FOR mtt IN letters.$lang.templates.keys.sort %]
             [% SET letter = letters.$lang.templates.$mtt %]
             [% NEXT IF letter.message_transport_type == "itiva" && !Koha.Preference('TalkingTechItivaPhoneNotification') %]
             [% NEXT IF letter.message_transport_type == "phone" && !Koha.Preference('PhoneNotification') %]
-            <div class="panel panel-default">
-                <div class="panel-heading" role="tab" id="[% letter.message_transport_type | html %]_[% lang | html %]Heading">
-                    <h3 class="panel-title">
-                        <a role="button" class="collapsed" data-toggle="collapse" data-parent="#group_[% lang | html %]" href="#[% letter.message_transport_type | html %]_[% lang | html %]" aria-expanded="false" aria-controls="[% letter.message_transport_type | html %]_[% lang | html %]">
-                            [% SWITCH letter.message_transport_type %]
-                                [% CASE 'email' %]<span>Email</span>
-                                [% CASE 'print' %]<span>[% tp('Message transport type', 'Print') | html %]</span>
-                                [% CASE 'sms' %]<span>SMS</span>
-                                [% CASE 'feed' %]<span>Feed</span>
-                                [% CASE 'itiva' %]<span>Phone (i-tiva)</span>
-                                [% CASE 'phone' %]<span>Phone</span>
-                                [% CASE %]<span>[% letter.message_transport_type | html %]</span>
+            [% WRAPPER accordion_item %]
+                [% WRAPPER accordion_heading panel_id="${letter.message_transport_type}_${lang}" %]
+                    [% SWITCH letter.message_transport_type %]
+                        [% CASE 'email' %]<span>Email</span>
+                        [% CASE 'print' %]<span>[% tp('Message transport type', 'Print') | html %]</span>
+                        [% CASE 'sms' %]<span>SMS</span>
+                        [% CASE 'feed' %]<span>Feed</span>
+                        [% CASE 'itiva' %]<span>Phone (i-tiva)</span>
+                        [% CASE 'phone' %]<span>Phone</span>
+                        [% CASE %]<span>[% letter.message_transport_type | html %]</span>
+                    [% END %]
+                [% END %]
+                [% WRAPPER accordion_panel panel_id="${letter.message_transport_type}_${lang}" %]
+                    [% IF letter.message_transport_type == "sms" and not Koha.Preference("SMSSendDriver") %]
+                        <fieldset class="rows mtt" disabled="disabled">
+                            <div class="dialog message">You should enable the SMSSendDriver preference to use the SMS templates.</div>
+                    [% ELSE %]
+                        <fieldset class="rows mtt">
+                    [% END %]
+                        <input type="hidden" name="message_transport_type" value="[% letter.message_transport_type | html %]" />
+                        <input type="hidden" name="lang" value="[% lang | html %]" />
+                        <ol>
+                            [% IF ( letter.tt_error ) %]
+                                <li class="template_toolkit_error">
+                                    <span class="label error">Template Toolkit error:</span>
+                                    [% letter.tt_error | html %]
+                                </li>
                             [% END %]
-                        </a>
-                    </h3>
-                </div> <!-- /.panel-heading -->
-                <div id="[% letter.message_transport_type | html %]_[% lang | html %]" class="panel-collapse collapse" role="tabpanel" aria-labelledby="[% letter.message_transport_type | html %]_[% lang | html %]Heading">
-                    <div class="panel-body">
-                        [% IF letter.message_transport_type == "sms" and not Koha.Preference("SMSSendDriver") %]
-                            <fieldset class="rows mtt" disabled="disabled">
-                                <div class="dialog message">You should enable the SMSSendDriver preference to use the SMS templates.</div>
-                        [% ELSE %]
-                            <fieldset class="rows mtt">
-                        [% END %]
-                            <input type="hidden" name="message_transport_type" value="[% letter.message_transport_type | html %]" />
-                            <input type="hidden" name="lang" value="[% lang | html %]" />
-                            <ol>
-                                [% IF ( letter.tt_error ) %]
-                                    <li class="template_toolkit_error">
-                                        <span class="label error">Template Toolkit error:</span>
-                                        [% letter.tt_error | html %]
-                                    </li>
-                                [% END %]
-                                [% IF ( letter.updated_on ) %]
-                                    <li>
-                                        <span class="label">Last updated:</span>
-                                        [% letter.updated_on | $KohaDates with_hours = 1 %]
-                                    </li>
-                                [% END %]
+                            [% IF ( letter.updated_on ) %]
                                 <li>
-                                    <label for="is_html_[% letter.message_transport_type | html %]_[% lang | html %]">HTML message:</label>
-                                    [% IF letter.is_html %]
-                                        <input type="checkbox" name="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" id="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" value="1" checked="checked" />
-                                    [% ELSE %]
-                                        <input type="checkbox" name="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" id="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" value="1" />
-                                    [% END %]
+                                    <span class="label">Last updated:</span>
+                                    [% letter.updated_on | $KohaDates with_hours = 1 %]
                                 </li>
-                                <li>
-                                    <label for="title_[% letter.message_transport_type | html %]_[% lang | html %]">Message subject:</label><input type="text" id="title_[% letter.message_transport_type | html %]_[% lang | html %]" name="title" size="60" value="[% letter.title | html %]" />
-                                </li>
-                                <li>
-                                    <label for="SQLfieldname_[% letter.message_transport_type | html %]_[% lang | html %]">Message body:</label>
-                                    [% IF letter.message_transport_type == 'sms' %]
-                                        <span class="sms_counter" id="sms_counter_[% lang | html %]">
-                                            [% IF letter.content && letter.content.length > 0 %]
-                                                [% tx("{content_length} / 160 characters", {content_length = letter.content.length} ) %]
-                                            [% ELSE %]
-                                                [% tx("{content_length} / 160 characters", {content_length = 0} ) %]
-                                            [% END %]
-                                        </span>
-                                    [% END %]
-                                    <table>
-                                        <tr>
-                                            <td>
-                                                <select name="SQLfieldname" id="SQLfieldname_[% letter.message_transport_type | html %]_[% lang | html %]" multiple="multiple" size="9">
-                                                    [% FOREACH SQLfieldname IN SQLfieldnames %]
-                                                        <option value="[% SQLfieldname.value | html %]">[% SQLfieldname.text | html %]</option>
-                                                    [% END %]
-                                                </select>
-                                            </td>
-                                            <td class="actions">
-                                                <button type="button" data-containerid="[% letter.message_transport_type | html %]_[% lang | html %]" class="btn btn-default btn-sm insert">Insert <i class="fa-solid fa-right-long"></i></button>
-                                            </td>
-                                            <td>
-                                                <textarea name="content" data-lang="[% lang | html %]" class="content_[% letter.message_transport_type | html %]" id="content_[% letter.message_transport_type | html %]_[% lang | html %]" cols="80" rows="15">[% letter.content | html %]</textarea>
-                                            </td>
-                                        </tr>
-                                    </table>
-                                </li>
-                                [% IF preview_is_available %]
-                                    <li>
-                                        <a href="/cgi-bin/koha/svc/letters/preview" class="preview_template btn btn-default btn-xs" title="Preview this notice template" data-mtt="[% letter.message_transport_type | html %]" data-lang="[% lang | html %]"><i class="fa-solid fa-eye"></i> Preview</a>
-                                    </li>
+                            [% END %]
+                            <li>
+                                <label for="is_html_[% letter.message_transport_type | html %]_[% lang | html %]">HTML message:</label>
+                                [% IF letter.is_html %]
+                                    <input type="checkbox" name="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" id="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" value="1" checked="checked" />
+                                [% ELSE %]
+                                    <input type="checkbox" name="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" id="is_html_[% letter.message_transport_type | html %]_[% lang | html %]" value="1" />
                                 [% END %]
-                            </ol>
-                        </fieldset> <!-- /.rows.mtt -->
-                    </div> <!-- /.panel-body -->
-                </div> <!-- /.panel-collapse -->
-            </div> <!-- /.panel.panel-default -->
+                            </li>
+                            <li>
+                                <label for="title_[% letter.message_transport_type | html %]_[% lang | html %]">Message subject:</label><input type="text" id="title_[% letter.message_transport_type | html %]_[% lang | html %]" name="title" size="60" value="[% letter.title | html %]" />
+                            </li>
+                            <li>
+                                <label for="SQLfieldname_[% letter.message_transport_type | html %]_[% lang | html %]">Message body:</label>
+                                [% IF letter.message_transport_type == 'sms' %]
+                                    <span class="sms_counter" id="sms_counter_[% lang | html %]">
+                                        [% IF letter.content && letter.content.length > 0 %]
+                                            [% tx("{content_length} / 160 characters", {content_length = letter.content.length} ) %]
+                                        [% ELSE %]
+                                            [% tx("{content_length} / 160 characters", {content_length = 0} ) %]
+                                        [% END %]
+                                    </span>
+                                [% END %]
+                                <table>
+                                    <tr>
+                                        <td>
+                                            <select name="SQLfieldname" id="SQLfieldname_[% letter.message_transport_type | html %]_[% lang | html %]" multiple="multiple" size="9">
+                                                [% FOREACH SQLfieldname IN SQLfieldnames %]
+                                                    <option value="[% SQLfieldname.value | html %]">[% SQLfieldname.text | html %]</option>
+                                                [% END %]
+                                            </select>
+                                        </td>
+                                        <td class="actions">
+                                            <button type="button" data-containerid="[% letter.message_transport_type | html %]_[% lang | html %]" class="btn btn-default btn-sm insert">Insert <i class="fa-solid fa-right-long"></i></button>
+                                        </td>
+                                        <td>
+                                            <textarea name="content" data-lang="[% lang | html %]" class="content_[% letter.message_transport_type | html %]" id="content_[% letter.message_transport_type | html %]_[% lang | html %]" cols="80" rows="15">[% letter.content | html %]</textarea>
+                                        </td>
+                                    </tr>
+                                </table>
+                            </li>
+                            [% IF preview_is_available %]
+                                <li>
+                                    <a href="/cgi-bin/koha/svc/letters/preview" class="preview_template btn btn-default btn-xs" title="Preview this notice template" data-mtt="[% letter.message_transport_type | html %]" data-lang="[% lang | html %]"><i class="fa-solid fa-eye"></i> Preview</a>
+                                </li>
+                            [% END %]
+                        </ol>
+                    </fieldset> <!-- /.rows.mtt -->
+                [% END %]
+            [% END # /collapse_item %]
         [% END # /FOR mtt %]
-    </div> <!-- /.panel-group#lang_lang -->
+    [% END # /WRAPPER accordion %]
 [% END %]
 
 [% MACRO jsinclude BLOCK %]