From: Wouter Admiraal <wouter.admiraal@sonarsource.com>
Date: Wed, 22 May 2019 07:33:48 +0000 (+0200)
Subject: SONAR-11921 Fix collapse block on static docs site
X-Git-Tag: 7.8~146
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=4812e6d383f4c1385771fab50c1edb339f5937fb;p=sonarqube.git

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 e0d7255b1fb..0fa37ad5a93 100644
--- 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 e0239d2bf27..d52ce259704 100644
--- 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');
+            }
+          });
+        }
       }
     }
   }