diff --git a/doc/conf.py b/doc/conf.py
index 176a0d8b3a7d1..6ac1b4e231822 100644
--- a/doc/conf.py
+++ b/doc/conf.py
@@ -299,6 +299,26 @@
 # Not showing the search summary makes the search page load faster.
 html_show_search_summary = False
 
+
+rst_prolog = """
+.. |details-start| raw:: html
+
+    <details>
+    <summary class="btn btn-light">
+
+.. |details-split| raw:: html
+
+    <span class="tooltiptext">Click for more details</span>
+    </summary>
+    <div class="card">
+
+.. |details-end| raw:: html
+
+    </div>
+    </details>
+
+"""
+
 # -- Options for LaTeX output ------------------------------------------------
 latex_elements = {
     # The paper size ('letterpaper' or 'a4paper').
diff --git a/doc/modules/model_evaluation.rst b/doc/modules/model_evaluation.rst
index 670e661d92ef7..9cc1025047802 100644
--- a/doc/modules/model_evaluation.rst
+++ b/doc/modules/model_evaluation.rst
@@ -162,6 +162,12 @@ the :func:`fbeta_score` function::
     >>> grid = GridSearchCV(LinearSVC(dual="auto"), param_grid={'C': [1, 10]},
     ...                     scoring=ftwo_scorer, cv=5)
 
+
+|details-start|
+**Custom scorer objects**
+|details-split|
+
+
 The second use case is to build a completely custom scorer object
 from a simple python function using :func:`make_scorer`, which can
 take several parameters:
@@ -202,13 +208,21 @@ Here is an example of building custom scorers, and of using the
     >>> score(clf, X, y)
     -0.69...
 
+|details-end|
 
 .. _diy_scoring:
 
 Implementing your own scoring object
 ------------------------------------
+
 You can generate even more flexible model scorers by constructing your own
 scoring object from scratch, without using the :func:`make_scorer` factory.
+
+
+|details-start|
+**How to build a scorer from scratch**
+|details-split|
+
 For a callable to be a scorer, it needs to meet the protocol specified by
 the following two rules:
 
@@ -249,6 +263,8 @@ the following two rules:
         ...  cv=5,
         ...  n_jobs=-1) # doctest: +SKIP
 
+|details-end|
+
 .. _multimetric_scoring:
 
 Using multiple metric evaluation
diff --git a/doc/themes/scikit-learn-modern/static/css/theme.css b/doc/themes/scikit-learn-modern/static/css/theme.css
index 90cfeb9300490..fb729223b57ab 100644
--- a/doc/themes/scikit-learn-modern/static/css/theme.css
+++ b/doc/themes/scikit-learn-modern/static/css/theme.css
@@ -147,6 +147,61 @@ div.clearer {
   clear: both;
 }
 
+/* details / summary */
+
+div.sk-page-content details {
+    margin: 4ex 0pt;
+}
+
+div.sk-page-content summary.btn {
+    display: list-item;
+    padding: 6px 20px;
+    border: 1pt solid #999;
+}
+
+div.sk-page-content details div.card {
+    padding: 0pt .5ex;
+    margin: 1ex 0pt;
+    border: 1px solid #e9ecef;
+    border-left-width: .25rem;
+    border-radius: .25rem;
+    background: rgb(250, 252, 253)
+}
+
+div.sk-page-content summary {
+  position: relative; /* Needed for the tooltips */
+}
+
+div.sk-page-content summary .tooltiptext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 150%;
+  left: 50%;
+  margin-left: -60px;
+}
+
+div.sk-page-content summary .tooltiptext::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: black transparent transparent transparent;
+}
+
+div.sk-page-content summary:hover .tooltiptext {
+  visibility: visible;
+}
+
 /* Button */
 
 .sk-btn-primary {
@@ -606,6 +661,7 @@ div.sk-sidebar-global-toc ul ul {
 div.sk-page-content h1 {
   background-color: #cde8ef;
   padding: 0.5rem;
+  margin-top: calc(max(2.5rem, 1vh));
   border-radius: 0 1rem;
   text-align: center;
   font-size: 2rem;
@@ -617,6 +673,7 @@ div.sk-page-content h2 {
   background-color: #BED4EB;
   border-radius: 0.3rem;
   font-size: 1.5rem;
+  margin-top: calc(max(2rem, .7vh));
   margin-bottom: 1rem;
   word-wrap: break-word;
 }
@@ -627,6 +684,7 @@ div.sk-page-content h3 {
   border-radius: 0.3rem;
   font-size: 1.2rem;
   word-wrap: break-word;
+  margin-top: 1.5rem;
 }
 
 div.sk-page-content h4 {