From b60b0ffd47eee41cfa63290ef1c76d5c93dc70a6 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Wed, 6 Apr 2022 12:00:19 -0700
Subject: [PATCH] update hidden=until-found example

The example still had some content-visibility:hidden-matchable in it and
it was also needlessly removing the hidden=until-found attribute which
the browser is supposed to do instead.
---
 explainers/hidden-content-explainer.md | 24 +++++++-----------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/explainers/hidden-content-explainer.md b/explainers/hidden-content-explainer.md
index 9170c99..d00dba8 100644
--- a/explainers/hidden-content-explainer.md
+++ b/explainers/hidden-content-explainer.md
@@ -75,13 +75,6 @@ sections -- something that is not currently possible.
 .collapsed > .title::before {
   content: '➡️ ';
 }
-
-.details {
-  margin-left: 20px;
-}
-.collapsed > .details {
-  content-visibility: hidden-matchable;
-}
 </style>
 
 Please explore the following sections:
@@ -101,22 +94,19 @@ Please explore the following sections:
 </div>
 
 <script>
-function updateHiddenAttribute(section) {
-  const details = section.querySelector('.details');
-  if (section.classList.contains('collapsed')) {
-    details.setAttribute('hidden', 'until-found');
-  } else {
-    details.removeAttribute('hidden');
-  }
-}
 document.querySelectorAll('.section').forEach(section => {
   section.onbeforematch = () => {
     section.classList.remove('collapsed');
-    updateHiddenAttribute(section);
   };
   section.querySelector('.title').onclick = () => {
     section.classList.toggle('collapsed');
-    updateHiddenAttribute(section);
+
+    const details = section.querySelector('.details');
+    if (section.classList.contains('collapsed')) {
+      details.hidden = 'until-found';
+    } else {
+      details.removeAttribute('hidden');
+    }
   };
 });
 </script>