diff --git a/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexDeploymentStep.Fields.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexDeploymentStep.Fields.Edit.cshtml
index 954e5b47c3c..67b4c23d15f 100644
--- a/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexDeploymentStep.Fields.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexDeploymentStep.Fields.Edit.cshtml
@@ -14,7 +14,7 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-reverseToggle=".idxsel" />
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target=".idxsel" aria-expanded="false" aria-controls="idxsel" />
                     @T["Include all search indexes."]
                 </label>
             </div>
@@ -22,7 +22,7 @@
     </div>
 </div>
 
-<div class="idxsel mb-3 mt-4 mb-5 @(Model.IncludeAll ? "collapse" : "show")">
+<div class="idxsel mb-3 mt-4 mb-5 collapse@(Model.IncludeAll ? string.Empty : " show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The search indexes to add as part of the plan."]</span>
@@ -48,16 +48,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    $(function () {
-        $("[data-reversetoggle]").on("click", function () {
-            var state = this.checked;
-            if (state) {
-                $($(this).attr("data-reversetoggle")).collapse('hide');
-            } else {
-                $($(this).attr("data-reversetoggle")).collapse('show');
-            }
-        });
-    });
-</script>
diff --git a/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexDeploymentStep.Fields.Summary.cshtml b/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexDeploymentStep.Fields.Summary.cshtml
index 76bb37d7ff2..202fef88b30 100644
--- a/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexDeploymentStep.Fields.Summary.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexDeploymentStep.Fields.Summary.cshtml
@@ -12,7 +12,7 @@
 
 @if (includeAll)
 {
-    <span class="badge badge-success">@T["All"]</span>
+    <span class="badge text-bg-success">@T["All"]</span>
 }
 else if (indexNames?.Length > 0)
 {
@@ -23,5 +23,5 @@ else if (indexNames?.Length > 0)
 }
 else
 {
-    <span class="badge badge-warning">@T["No index selected."]</span>
+    <span class="badge text-bg-warning">@T["No index selected."]</span>
 }
diff --git a/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexRebuildDeploymentStep.Fields.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexRebuildDeploymentStep.Fields.Edit.cshtml
index 60692a9530a..d2bda58a3d4 100644
--- a/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexRebuildDeploymentStep.Fields.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexRebuildDeploymentStep.Fields.Edit.cshtml
@@ -9,7 +9,7 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-element-id-to-collapse="indexes-list" />
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target="#indexes-list" aria-expanded="false" aria-controls="indexes-list" />
                     @T["Include all Azure AI Search indices."]
                 </label>
             </div>
@@ -43,11 +43,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    (function () {
-        document.getElementById('@Html.IdFor(x => x.IncludeAll)').addEventListener('change', (e) => {
-            new bootstrap.Collapse(document.getElementById(e.target.dataset.elementIdToCollapse));
-        });
-    })();
-</script>
diff --git a/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexResetDeploymentStep.Fields.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexResetDeploymentStep.Fields.Edit.cshtml
index 42bc52d7257..20ec387c270 100644
--- a/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexResetDeploymentStep.Fields.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexResetDeploymentStep.Fields.Edit.cshtml
@@ -9,7 +9,7 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-element-id-to-collapse="indexes-list" />
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target="#indexes-list" aria-expanded="false" aria-controls="indexes-list" />
                     @T["Include all Azure AI Search indices."]
                 </label>
             </div>
@@ -17,7 +17,7 @@
     </div>
 </div>
 
-<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? string.Empty : "show")">
+<div id="indexes-list" class="mt-4 mb-5 collapse@(Model.IncludeAll ? string.Empty : " show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The Azure AI Search Indices to reset as part of the plan."]</span>
@@ -43,11 +43,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    (function () {
-        document.getElementById('@Html.IdFor(x => x.IncludeAll)').addEventListener('change', (e) => {
-            new bootstrap.Collapse(document.getElementById(e.target.dataset.elementIdToCollapse));
-        });
-    })();
-</script>
diff --git a/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexResetDeploymentStep.Fields.Summary.cshtml b/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexResetDeploymentStep.Fields.Summary.cshtml
index 729d19b99bd..48107eaed97 100644
--- a/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexResetDeploymentStep.Fields.Summary.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Search.AzureAI/Views/Items/AzureAISearchIndexResetDeploymentStep.Fields.Summary.cshtml
@@ -12,7 +12,7 @@
 
 @if (includeAll)
 {
-    <span class="badge bg-success">@T["All"]</span>
+    <span class="badge text-bg-success">@T["All"]</span>
 }
 else if (indices?.Length > 0)
 {
diff --git a/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexDeploymentStep.Fields.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexDeploymentStep.Fields.Edit.cshtml
index 1094555ae8d..4fd588d8d07 100644
--- a/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexDeploymentStep.Fields.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexDeploymentStep.Fields.Edit.cshtml
@@ -12,7 +12,7 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-reverseToggle=".idxsel" />
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target=".idxsel" aria-expanded="false" aria-controls="idxsel" />
                     @T["Include all search indexes."]
                 </label>
             </div>
@@ -20,7 +20,7 @@
     </div>
 </div>
 
-<div class="idxsel mb-3 mt-4 mb-5 @(Model.IncludeAll ? "collapse" : "show")">
+<div class="idxsel mb-3 mt-4 mb-5 collapse@(Model.IncludeAll ? string.Empty : " show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The search indexes to add as part of the plan."]</span>
@@ -31,12 +31,12 @@
             <ul class="list-group">
                 @foreach (var indexName in allIndexNames)
                 {
-                    var checkd = indexNames?.Contains(indexName);
+                    var isChecked = indexNames?.Contains(indexName);
 
                     <li class="list-group-item">
                         <div class="form-check">
                             <label class="form-check-label">
-                                <input class="form-check-input" type="checkbox" name="@Html.NameFor(m => m.IndexNames)" value="@indexName" checked="@checkd">
+                                <input class="form-check-input" type="checkbox" name="@Html.NameFor(m => m.IndexNames)" value="@indexName" checked="@isChecked">
                                 @indexName
                             </label>
                         </div>
@@ -46,16 +46,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    $(function () {
-        $("[data-reversetoggle]").on("click", function () {
-            var state = this.checked;
-            if (state) {
-                $($(this).attr("data-reversetoggle")).collapse('hide');
-            } else {
-                $($(this).attr("data-reversetoggle")).collapse('show');
-            }
-        });
-    });
-</script>
diff --git a/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexDeploymentStep.Fields.Summary.cshtml b/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexDeploymentStep.Fields.Summary.cshtml
index 2c79b701fd0..c86c40a0953 100644
--- a/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexDeploymentStep.Fields.Summary.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexDeploymentStep.Fields.Summary.cshtml
@@ -12,7 +12,7 @@
 
 @if (includeAll)
 {
-    <span class="badge badge-success">@T["All"]</span>
+    <span class="badge text-bg-success">@T["All"]</span>
 }
 else if (indexNames?.Length > 0)
 {
@@ -23,5 +23,5 @@ else if (indexNames?.Length > 0)
 }
 else
 {
-    <span class="badge badge-warning">@T["No index selected."]</span>
+    <span class="badge text-bg-warning">@T["No index selected."]</span>
 }
diff --git a/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexRebuildDeploymentStep.Fields.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexRebuildDeploymentStep.Fields.Edit.cshtml
index 34d01515c63..3f3720a0246 100644
--- a/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexRebuildDeploymentStep.Fields.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexRebuildDeploymentStep.Fields.Edit.cshtml
@@ -7,7 +7,7 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-element-id-to-collapse="indexes-list"/>
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target="#indexes-list" aria-expanded="false" aria-controls="indexes-list" />
                     @T["Include all Elasticsearch indices."]
                 </label>
             </div>
@@ -15,7 +15,7 @@
     </div>
 </div>
 
-<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? "" : "show")">
+<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? string.Empty : "show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The Elasticsearch indices to rebuild as part of the plan."]</span>
@@ -41,11 +41,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    (function () {
-        document.getElementById('@Html.IdFor(x => x.IncludeAll)').addEventListener('change', (e) => {
-            new bootstrap.Collapse(document.getElementById(e.target.dataset.elementIdToCollapse));
-        });
-    })();
-</script>
diff --git a/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexResetDeploymentStep.Fields.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexResetDeploymentStep.Fields.Edit.cshtml
index 38fec1a93ca..553597243bc 100644
--- a/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexResetDeploymentStep.Fields.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexResetDeploymentStep.Fields.Edit.cshtml
@@ -7,7 +7,7 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-element-id-to-collapse="indexes-list" />
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target="#indexes-list" aria-expanded="false" aria-controls="indexes-list" />
                     @T["Include all Elasticsearch indices."]
                 </label>
             </div>
@@ -15,7 +15,7 @@
     </div>
 </div>
 
-<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? "" : "show")">
+<div id="indexes-list" class="mt-4 mb-5 collapse@(Model.IncludeAll ? string.Empty : " show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The Elasticsearch Indices to reset as part of the plan."]</span>
@@ -41,11 +41,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    (function () {
-        document.getElementById('@Html.IdFor(x => x.IncludeAll)').addEventListener('change', (e) => {
-            new bootstrap.Collapse(document.getElementById(e.target.dataset.elementIdToCollapse));
-        });
-    })();
-</script>
diff --git a/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexResetDeploymentStep.Fields.Summary.cshtml b/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexResetDeploymentStep.Fields.Summary.cshtml
index 0716f2f4d55..2d10777d609 100644
--- a/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexResetDeploymentStep.Fields.Summary.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Search.Elasticsearch/Views/Items/ElasticIndexResetDeploymentStep.Fields.Summary.cshtml
@@ -12,7 +12,7 @@
 
 @if (includeAll)
 {
-    <span class="badge bg-success">@T["All"]</span>
+    <span class="badge text-bg-success">@T["All"]</span>
 }
 else if (indices?.Length > 0)
 {
diff --git a/src/OrchardCore.Modules/OrchardCore.Search.Lucene/Views/Items/LuceneIndexDeploymentStep.Fields.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Search.Lucene/Views/Items/LuceneIndexDeploymentStep.Fields.Edit.cshtml
index 6be55ec723d..1269a2d4856 100644
--- a/src/OrchardCore.Modules/OrchardCore.Search.Lucene/Views/Items/LuceneIndexDeploymentStep.Fields.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Search.Lucene/Views/Items/LuceneIndexDeploymentStep.Fields.Edit.cshtml
@@ -12,8 +12,7 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll"
-                           data-reverseToggle=".idxsel" />
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target=".idxsel" aria-expanded="false" aria-controls="idxsel" />
                     @T["Include all search indexes."]
                 </label>
             </div>
@@ -21,7 +20,7 @@
     </div>
 </div>
 
-<div class="idxsel mt-4 mb-5 @(Model.IncludeAll ? "collapse" : "show")">
+<div class="idxsel mb-3 mt-4 mb-5 collapse@(Model.IncludeAll ? string.Empty : " show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The search indexes to add as part of the plan."]</span>
@@ -47,16 +46,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    $(function () {
-        $("[data-reversetoggle]").on("click", function () {
-            var state = this.checked;
-            if (state) {
-                $($(this).attr("data-reversetoggle")).collapse('hide');
-            } else {
-                $($(this).attr("data-reversetoggle")).collapse('show');
-            }
-        });
-    });
-</script>
diff --git a/src/OrchardCore.Modules/OrchardCore.Search.Lucene/Views/Items/LuceneIndexRebuildDeploymentStep.Fields.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Search.Lucene/Views/Items/LuceneIndexRebuildDeploymentStep.Fields.Edit.cshtml
index cbc1d9d6ce7..64c8cc47548 100644
--- a/src/OrchardCore.Modules/OrchardCore.Search.Lucene/Views/Items/LuceneIndexRebuildDeploymentStep.Fields.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Search.Lucene/Views/Items/LuceneIndexRebuildDeploymentStep.Fields.Edit.cshtml
@@ -7,7 +7,7 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-element-id-to-collapse="indexes-list"/>
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target="#indexes-list" aria-expanded="false" aria-controls="indexes-list" />
                     @T["Include all Lucene search indices."]
                 </label>
             </div>
@@ -15,7 +15,7 @@
     </div>
 </div>
 
-<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? "" : "show")">
+<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? string.Empty : "show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The Lucene search indices to rebuild as part of the plan."]</span>
@@ -41,11 +41,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    (function () {
-        document.getElementById('@Html.IdFor(x => x.IncludeAll)').addEventListener('change', (e) => {
-            new bootstrap.Collapse(document.getElementById(e.target.dataset.elementIdToCollapse));
-        });
-    })();
-</script>
diff --git a/src/OrchardCore.Modules/OrchardCore.Search.Lucene/Views/Items/LuceneIndexResetDeploymentStep.Fields.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.Search.Lucene/Views/Items/LuceneIndexResetDeploymentStep.Fields.Edit.cshtml
index d9f4b2cd492..0c85470c018 100644
--- a/src/OrchardCore.Modules/OrchardCore.Search.Lucene/Views/Items/LuceneIndexResetDeploymentStep.Fields.Edit.cshtml
+++ b/src/OrchardCore.Modules/OrchardCore.Search.Lucene/Views/Items/LuceneIndexResetDeploymentStep.Fields.Edit.cshtml
@@ -7,7 +7,7 @@
         <div class="col">
             <div class="form-check">
                 <label class="form-check-label">
-                    <input class="form-check-input" asp-for="IncludeAll" data-element-id-to-collapse="indexes-list" />
+                    <input class="form-check-input" asp-for="IncludeAll" data-bs-toggle="collapse" role="button" data-bs-target="#indexes-list" aria-expanded="false" aria-controls="indexes-list" />
                     @T["Include all Lucene search indices."]
                 </label>
             </div>
@@ -15,7 +15,7 @@
     </div>
 </div>
 
-<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? "" : "show")">
+<div id="indexes-list" class="mt-4 mb-5 collapse @(Model.IncludeAll ? string.Empty : "show")">
     <div class="row">
         <div class="col-small col-12 col-sm-9 col-md-6 col-lg-3 col-xl-3">
             <span class="hint">@T["The Lucene Search Indices to reset as part of the plan."]</span>
@@ -41,11 +41,3 @@
         </div>
     </div>
 </div>
-
-<script at="Foot">
-    (function () {
-        document.getElementById('@Html.IdFor(x => x.IncludeAll)').addEventListener('change', (e) => {
-            new bootstrap.Collapse(document.getElementById(e.target.dataset.elementIdToCollapse));
-        });
-    })();
-</script>