From 7b3b60149b5a9a907e0534b3459624c00f38bab9 Mon Sep 17 00:00:00 2001
From: Guillaume Lemaitre <g.lemaitre58@gmail.com>
Date: Sat, 13 May 2023 14:17:03 +0200
Subject: [PATCH 1/3] DOC fix collapsing using new bootstrap v5 API

---
 doc/source/getting_started/index.rst          | 20 +++++++++----------
 .../07_reshape_table_layout.rst               |  2 +-
 .../intro_tutorials/08_combine_dataframes.rst |  4 ++--
 .../intro_tutorials/09_timeseries.rst         |  2 +-
 .../includes/air_quality_no2.rst              |  2 +-
 .../intro_tutorials/includes/titanic.rst      |  2 +-
 6 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/doc/source/getting_started/index.rst b/doc/source/getting_started/index.rst
index 250fa37a84619..abb3aad8dbd3e 100644
--- a/doc/source/getting_started/index.rst
+++ b/doc/source/getting_started/index.rst
@@ -69,7 +69,7 @@ Intro to pandas
     <div id="accordion" class="shadow tutorial-accordion">
 
         <div class="card tutorial-card">
-            <div class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseOne">
+            <div class="card-header collapsed card-link" data-bs-toggle="collapse" data-bs-target="#collapseOne">
                 <div class="d-flex flex-row tutorial-card-header-1">
                     <div class="d-flex flex-row tutorial-card-header-2">
                         <button class="btn btn-dark btn-sm"></button>
@@ -116,7 +116,7 @@ to explore, clean, and process your data. In pandas, a data table is called a :c
         </div>
 
         <div class="card tutorial-card">
-            <div class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseTwo">
+            <div class="card-header collapsed card-link" data-bs-toggle="collapse" data-bs-target="#collapseTwo">
                 <div class="d-flex flex-row tutorial-card-header-1">
                     <div class="d-flex flex-row tutorial-card-header-2">
                         <button class="btn btn-dark btn-sm"></button>
@@ -163,7 +163,7 @@ data sources is provided by function with the prefix ``read_*``. Similarly, the
         </div>
 
         <div class="card tutorial-card">
-            <div class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseThree">
+            <div class="card-header collapsed card-link" data-bs-toggle="collapse" data-bs-target="#collapseThree">
                 <div class="d-flex flex-row tutorial-card-header-1">
                     <div class="d-flex flex-row tutorial-card-header-2">
                         <button class="btn btn-dark btn-sm"></button>
@@ -210,7 +210,7 @@ data you need are available in pandas.
         </div>
 
         <div class="card tutorial-card">
-            <div class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseFour">
+            <div class="card-header collapsed card-link" data-bs-toggle="collapse" data-bs-target="#collapseFour">
                 <div class="d-flex flex-row tutorial-card-header-1">
                     <div class="d-flex flex-row tutorial-card-header-2">
                         <button class="btn btn-dark btn-sm"></button>
@@ -257,7 +257,7 @@ corresponding to your data.
         </div>
 
         <div class="card tutorial-card">
-            <div class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseFive">
+            <div class="card-header collapsed card-link" data-bs-toggle="collapse" data-bs-target="#collapseFive">
                 <div class="d-flex flex-row tutorial-card-header-1">
                     <div class="d-flex flex-row tutorial-card-header-2">
                         <button class="btn btn-dark btn-sm"></button>
@@ -304,7 +304,7 @@ Adding a column to a :class:`DataFrame` based on existing data in other columns
         </div>
 
         <div class="card tutorial-card">
-            <div class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseSix">
+            <div class="card-header collapsed card-link" data-bs-toggle="collapse" data-bs-target="#collapseSix">
                 <div class="d-flex flex-row tutorial-card-header-1">
                     <div class="d-flex flex-row tutorial-card-header-2">
                         <button class="btn btn-dark btn-sm"></button>
@@ -351,7 +351,7 @@ data set, a sliding window of the data, or grouped by categories. The latter is
         </div>
 
         <div class="card tutorial-card">
-            <div class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseSeven">
+            <div class="card-header collapsed card-link" data-bs-toggle="collapse" data-bs-target="#collapseSeven">
                 <div class="d-flex flex-row tutorial-card-header-1">
                     <div class="d-flex flex-row tutorial-card-header-2">
                         <button class="btn btn-dark btn-sm"></button>
@@ -398,7 +398,7 @@ from long to wide format. With aggregations built-in, a pivot table is created w
         </div>
 
         <div class="card tutorial-card">
-            <div class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseEight">
+            <div class="card-header collapsed card-link" data-bs-toggle="collapse" data-bs-target="#collapseEight">
                 <div class="d-flex flex-row tutorial-card-header-1">
                     <div class="d-flex flex-row tutorial-card-header-2">
                         <button class="btn btn-dark btn-sm"></button>
@@ -444,7 +444,7 @@ Multiple tables can be concatenated both column wise and row wise as database-li
         </div>
 
         <div class="card tutorial-card">
-            <div class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseNine">
+            <div class="card-header collapsed card-link" data-bs-toggle="collapse" data-bs-target="#collapseNine">
                 <div class="d-flex flex-row tutorial-card-header-1">
                     <div class="d-flex flex-row tutorial-card-header-2">
                         <button class="btn btn-dark btn-sm"></button>
@@ -487,7 +487,7 @@ pandas has great support for time series and has an extensive set of tools for w
         </div>
 
         <div class="card tutorial-card">
-            <div class="card-header collapsed card-link" data-toggle="collapse" data-target="#collapseTen">
+            <div class="card-header collapsed card-link" data-bs-toggle="collapse" data-bs-target="#collapseTen">
                 <div class="d-flex flex-row tutorial-card-header-1">
                     <div class="d-flex flex-row tutorial-card-header-2">
                         <button class="btn btn-dark btn-sm"></button>
diff --git a/doc/source/getting_started/intro_tutorials/07_reshape_table_layout.rst b/doc/source/getting_started/intro_tutorials/07_reshape_table_layout.rst
index 6c920c92e4d05..fcc81bd46074a 100644
--- a/doc/source/getting_started/intro_tutorials/07_reshape_table_layout.rst
+++ b/doc/source/getting_started/intro_tutorials/07_reshape_table_layout.rst
@@ -28,7 +28,7 @@
 
         </li>
         <li class="list-group-item gs-data-list">
-            <div data-toggle="collapse" href="#collapsedata2" role="button" aria-expanded="false" aria-controls="collapsedata2">
+            <div data-bs-toggle="collapse" href="#collapsedata2" role="button" aria-expanded="false" aria-controls="collapsedata2">
                 <span class="badge badge-dark">Air quality data</span>
             </div>
             <div class="collapse" id="collapsedata2">
diff --git a/doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst b/doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst
index f369feb3e03a5..0adb3b9648d62 100644
--- a/doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst
+++ b/doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst
@@ -16,7 +16,7 @@
         </div>
         <ul class="list-group list-group-flush">
             <li class="list-group-item gs-data-list">
-                <div data-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
+                <div data-bs-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
                     <span class="badge badge-dark">Air quality Nitrate data</span>
                 </div>
                 <div class="collapse" id="collapsedata">
@@ -50,7 +50,7 @@ Westminster* in respectively Paris, Antwerp and London.
 
         </li>
         <li class="list-group-item gs-data-list">
-            <div data-toggle="collapse" href="#collapsedata2" role="button" aria-expanded="false" aria-controls="collapsedata2">
+            <div data-bs-toggle="collapse" href="#collapsedata2" role="button" aria-expanded="false" aria-controls="collapsedata2">
                 <span class="badge badge-dark">Air quality Particulate matter data</span>
             </div>
             <div class="collapse" id="collapsedata2">
diff --git a/doc/source/getting_started/intro_tutorials/09_timeseries.rst b/doc/source/getting_started/intro_tutorials/09_timeseries.rst
index 76dd836098f58..5e115bc1edef1 100644
--- a/doc/source/getting_started/intro_tutorials/09_timeseries.rst
+++ b/doc/source/getting_started/intro_tutorials/09_timeseries.rst
@@ -17,7 +17,7 @@
         </div>
         <ul class="list-group list-group-flush">
             <li class="list-group-item gs-data-list">
-                <div data-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
+                <div data-bs-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
                     <span class="badge badge-dark">Air quality data</span>
                 </div>
                 <div class="collapse" id="collapsedata">
diff --git a/doc/source/getting_started/intro_tutorials/includes/air_quality_no2.rst b/doc/source/getting_started/intro_tutorials/includes/air_quality_no2.rst
index 43790bd53f587..5860abfe6574d 100644
--- a/doc/source/getting_started/intro_tutorials/includes/air_quality_no2.rst
+++ b/doc/source/getting_started/intro_tutorials/includes/air_quality_no2.rst
@@ -1,6 +1,6 @@
 .. raw:: html
 
-    <div data-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
+    <div data-bs-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
         <span class="badge badge-dark">Air quality data</span>
     </div>
     <div class="collapse" id="collapsedata">
diff --git a/doc/source/getting_started/intro_tutorials/includes/titanic.rst b/doc/source/getting_started/intro_tutorials/includes/titanic.rst
index 19b8e81914e31..bbf7247d8e182 100644
--- a/doc/source/getting_started/intro_tutorials/includes/titanic.rst
+++ b/doc/source/getting_started/intro_tutorials/includes/titanic.rst
@@ -1,6 +1,6 @@
 .. raw:: html
 
-    <div data-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
+    <div data-bs-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
         <span class="badge badge-dark">Titanic data</span>
     </div>
     <div class="collapse" id="collapsedata">

From a2b2b4232cc9cf1e548bfa3b84a4a1da92847070 Mon Sep 17 00:00:00 2001
From: Guillaume Lemaitre <g.lemaitre58@gmail.com>
Date: Sat, 13 May 2023 16:50:14 +0200
Subject: [PATCH 2/3] FIX use visible button in both dark and light theme

---
 .../intro_tutorials/07_reshape_table_layout.rst               | 2 +-
 .../getting_started/intro_tutorials/08_combine_dataframes.rst | 4 ++--
 doc/source/getting_started/intro_tutorials/09_timeseries.rst  | 2 +-
 .../intro_tutorials/includes/air_quality_no2.rst              | 2 +-
 .../getting_started/intro_tutorials/includes/titanic.rst      | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/doc/source/getting_started/intro_tutorials/07_reshape_table_layout.rst b/doc/source/getting_started/intro_tutorials/07_reshape_table_layout.rst
index fcc81bd46074a..c7e564f94cdc6 100644
--- a/doc/source/getting_started/intro_tutorials/07_reshape_table_layout.rst
+++ b/doc/source/getting_started/intro_tutorials/07_reshape_table_layout.rst
@@ -29,7 +29,7 @@
         </li>
         <li class="list-group-item gs-data-list">
             <div data-bs-toggle="collapse" href="#collapsedata2" role="button" aria-expanded="false" aria-controls="collapsedata2">
-                <span class="badge badge-dark">Air quality data</span>
+                <span class="badge bg-secondary">Air quality data</span>
             </div>
             <div class="collapse" id="collapsedata2">
                 <div class="card-body">
diff --git a/doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst b/doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst
index 0adb3b9648d62..89b43cf3a7b25 100644
--- a/doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst
+++ b/doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst
@@ -17,7 +17,7 @@
         <ul class="list-group list-group-flush">
             <li class="list-group-item gs-data-list">
                 <div data-bs-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
-                    <span class="badge badge-dark">Air quality Nitrate data</span>
+                    <span class="badge bg-dark">Air quality Nitrate data</span>
                 </div>
                 <div class="collapse" id="collapsedata">
                     <div class="card-body">
@@ -51,7 +51,7 @@ Westminster* in respectively Paris, Antwerp and London.
         </li>
         <li class="list-group-item gs-data-list">
             <div data-bs-toggle="collapse" href="#collapsedata2" role="button" aria-expanded="false" aria-controls="collapsedata2">
-                <span class="badge badge-dark">Air quality Particulate matter data</span>
+                <span class="badge bg-secondary">Air quality Particulate matter data</span>
             </div>
             <div class="collapse" id="collapsedata2">
                 <div class="card-body">
diff --git a/doc/source/getting_started/intro_tutorials/09_timeseries.rst b/doc/source/getting_started/intro_tutorials/09_timeseries.rst
index 5e115bc1edef1..470b3908802b2 100644
--- a/doc/source/getting_started/intro_tutorials/09_timeseries.rst
+++ b/doc/source/getting_started/intro_tutorials/09_timeseries.rst
@@ -18,7 +18,7 @@
         <ul class="list-group list-group-flush">
             <li class="list-group-item gs-data-list">
                 <div data-bs-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
-                    <span class="badge badge-dark">Air quality data</span>
+                    <span class="badge bg-secondary">Air quality data</span>
                 </div>
                 <div class="collapse" id="collapsedata">
                     <div class="card-body">
diff --git a/doc/source/getting_started/intro_tutorials/includes/air_quality_no2.rst b/doc/source/getting_started/intro_tutorials/includes/air_quality_no2.rst
index 5860abfe6574d..b699dd9b23f68 100644
--- a/doc/source/getting_started/intro_tutorials/includes/air_quality_no2.rst
+++ b/doc/source/getting_started/intro_tutorials/includes/air_quality_no2.rst
@@ -1,7 +1,7 @@
 .. raw:: html
 
     <div data-bs-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
-        <span class="badge badge-dark">Air quality data</span>
+        <span class="badge bg-secondary">Air quality data</span>
     </div>
     <div class="collapse" id="collapsedata">
         <div class="card-body">
diff --git a/doc/source/getting_started/intro_tutorials/includes/titanic.rst b/doc/source/getting_started/intro_tutorials/includes/titanic.rst
index bbf7247d8e182..1470909b3d051 100644
--- a/doc/source/getting_started/intro_tutorials/includes/titanic.rst
+++ b/doc/source/getting_started/intro_tutorials/includes/titanic.rst
@@ -1,7 +1,7 @@
 .. raw:: html
 
     <div data-bs-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
-        <span class="badge badge-dark">Titanic data</span>
+        <span class="badge badge-secondary">Titanic data</span>
     </div>
     <div class="collapse" id="collapsedata">
         <div class="card-body">

From eae22fc504e116a27def1851ccab19a8ae7223a1 Mon Sep 17 00:00:00 2001
From: Guillaume Lemaitre <g.lemaitre58@gmail.com>
Date: Sat, 13 May 2023 22:27:37 +0200
Subject: [PATCH 3/3] iter

---
 .../getting_started/intro_tutorials/08_combine_dataframes.rst   | 2 +-
 doc/source/getting_started/intro_tutorials/includes/titanic.rst | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst b/doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst
index 89b43cf3a7b25..9081f274cd941 100644
--- a/doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst
+++ b/doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst
@@ -17,7 +17,7 @@
         <ul class="list-group list-group-flush">
             <li class="list-group-item gs-data-list">
                 <div data-bs-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
-                    <span class="badge bg-dark">Air quality Nitrate data</span>
+                    <span class="badge bg-secondary">Air quality Nitrate data</span>
                 </div>
                 <div class="collapse" id="collapsedata">
                     <div class="card-body">
diff --git a/doc/source/getting_started/intro_tutorials/includes/titanic.rst b/doc/source/getting_started/intro_tutorials/includes/titanic.rst
index 1470909b3d051..6e03b848aab06 100644
--- a/doc/source/getting_started/intro_tutorials/includes/titanic.rst
+++ b/doc/source/getting_started/intro_tutorials/includes/titanic.rst
@@ -1,7 +1,7 @@
 .. raw:: html
 
     <div data-bs-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
-        <span class="badge badge-secondary">Titanic data</span>
+        <span class="badge bg-secondary">Titanic data</span>
     </div>
     <div class="collapse" id="collapsedata">
         <div class="card-body">