SONAR-11921 Fix collapse block on static docs site

diff --git a/server/sonar-docs/src/layouts/layout.css b/server/sonar-docs/src/layouts/layout.css
index e0d7255b1fb17c69d294b7aecf1e17bc3324af92..0fa37ad5a93b8aa9e5395439b5d6386e8f3997a8 100644 (file)
--- a/server/sonar-docs/src/layouts/layout.css
+++ b/server/sonar-docs/src/layouts/layout.css
@@ -663,7 +663,7 @@ ul > ul {
   margin: 0 0 1.5rem;
 }
 
-.collapse > a:first-child {
+.collapse div > a:first-child {
   background: url(../images/open.svg) no-repeat 0 50%;
   padding-left: 20px;
   display: block;
@@ -677,27 +677,27 @@ ul > ul {
   transition: all 0.2s ease 0s;
 }
 
-.collapse > a:first-child:hover {
+.collapse div > a:first-child:hover {
   color: #195f8d;
 }
 
-.collapse.close > a:first-child {
+.collapse.close div > a:first-child {
   background: url(../images/close.svg) no-repeat 0 50%;
 }
 
-.collapse.close > * {
+.collapse.close div > * {
   display: none;
 }
 
-.collapse.close > a:first-child {
+.collapse.close div > a:first-child {
   margin: 0;
 }
 
-.collapse *:last-child {
+.collapse div *:last-child {
   margin-bottom: 0;
 }
 
-.collapse .alert {
+.collapse div .alert {
   margin: 0 0.5em 1.5rem;
 }
 

diff --git a/server/sonar-docs/src/templates/page.tsx b/server/sonar-docs/src/templates/page.tsx
index e0239d2bf2767c42a78836d3f1ca990b716a6d07..d52ce259704bd6d10f0dd73a33743ae13a69940c 100644 (file)
--- a/server/sonar-docs/src/templates/page.tsx
+++ b/server/sonar-docs/src/templates/page.tsx
@@ -42,17 +42,27 @@ export default class Page extends React.PureComponent<Props> {
 
     for (let i = 0; i < collapsables.length; i++) {
       collapsables[i].classList.add('close');
-      const firstChild = collapsables[i].firstElementChild;
-      if (firstChild) {
-        firstChild.outerHTML = firstChild.outerHTML
-          .replace(/<h2/gi, '<a href="#"')
-          .replace(/<\/h2>/gi, '</a>');
-        firstChild.addEventListener('click', (event: Event & { currentTarget: HTMLElement }) => {
-          event.preventDefault();
-          if (event.currentTarget.parentElement) {
-            event.currentTarget.parentElement.classList.toggle('close');
-          }
-        });
+      const customBlockWrapper = collapsables[i].querySelector('.custom-block-body');
+      if (customBlockWrapper) {
+        let firstChild = customBlockWrapper.firstElementChild;
+        if (firstChild) {
+          firstChild.outerHTML = firstChild.outerHTML
+            .replace(/<h2/gi, '<a href="#"')
+            .replace(/<\/h2>/gi, '</a>');
+
+          // We changed the element. It's reference is no longer correct in some
+          // browsers. Fetch it again.
+          firstChild = customBlockWrapper.firstElementChild;
+          firstChild!.addEventListener('click', (event: Event & { currentTarget: HTMLElement }) => {
+            event.preventDefault();
+            if (
+              event.currentTarget.parentElement &&
+              event.currentTarget.parentElement.parentElement
+            ) {
+              event.currentTarget.parentElement.parentElement.classList.toggle('close');
+            }
+          });
+        }
       }
     }
   }