quatuorbellefeuille.com

commit c7d0c9d90c7981878e5dc7f163fb41f350c5f45e
parent 89d7345d98640482f1f925b06a8238f3b1355ba1
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date:   Mon, 23 Nov 2020 00:03:57 +0100

Hide and show details on demand

Don't write display:none into regular stylesheets, otherwise people
who disable JS will be screwed.

Diffstat:
M
actualités.html
 | 
18
++++++++++++++++++

1 file changed, 18 insertions(+), 0 deletions(-)
diff --git a/actualités.html b/actualités.html
@@ -223,6 +223,24 @@
         </div>
       </div>
 
+      <!-- TODO: scroll list and details independently -->
+      <!-- TODO: check URL for anchor and auto-enable -->
+      <script>
+        var detailsStyle = document.createElement('style');
+        document.head.appendChild(detailsStyle);
+        detailsStyle.sheet.insertRule('.details:not(.active) {display:none}');
+
+        document.querySelectorAll('.event a').forEach((link) => {
+            link.onclick = function() {
+                var prev = document.querySelector('.details.active');
+                if (prev)
+                    prev.classList.remove('active');
+                var id = link.attributes['href'].value;
+                document.querySelector(id).classList.add('active');
+            }
+        });
+      </script>
+
     </main>
 
     <footer class="social">