diff --git a/assets/js/spoiler.js b/assets/js/spoiler.js
index 183efc4ba3..ddff02f4de 100644
--- a/assets/js/spoiler.js
+++ b/assets/js/spoiler.js
@@ -7,7 +7,7 @@
 (function($) {
   'use strict'
 
-  function buildSpoilers($elem) {
+  function buildOldSpoilers($elem) {
     $elem.each(function() {
       const $this = $(this)
       if (!$this.hasClass('spoiler-build')) {
@@ -31,13 +31,27 @@
     })
   }
 
+  function buildNewSpoilers() {
+    for (const spoiler of document.querySelectorAll('details.custom-block-spoiler')) {
+      if (spoiler.querySelector('summary') === null) {
+        const summary = document.createElement('summary')
+        summary.classList.add('custom-block-heading')
+        summary.textContent = 'Afficher/Masquer le contenu masqué'
+        const body = spoiler.querySelector('.custom-block-body')
+        spoiler.insertBefore(summary, body)
+      }
+    }
+  }
+
   $(document).ready(function() {
     const $content = $('#content')
     $('div.spoiler').addClass('custom-block-spoiler') /* for compatibility */
-    buildSpoilers($content.find('.custom-block-spoiler'))
+    buildOldSpoilers($content.find('div.custom-block-spoiler'))
+    buildNewSpoilers()
     $content.on('DOMNodeInserted', function(e) {
-      const $spoilers = $(e.target).find('.custom-block-spoiler')
-      return buildSpoilers($spoilers)
+      const $spoilers = $(e.target).find('div.custom-block-spoiler')
+      buildOldSpoilers($spoilers)
+      return buildNewSpoilers()
     })
   })
 })(jQuery)
diff --git a/assets/scss/base/_content.scss b/assets/scss/base/_content.scss
index 8ae35db46b..d0edacabe4 100644
--- a/assets/scss/base/_content.scss
+++ b/assets/scss/base/_content.scss
@@ -241,7 +241,7 @@ h6 {
     }
 }
 
-.js .spoiler, .custom-block-spoiler {
+.js .spoiler, div.custom-block-spoiler {
     display: none;
 }