Hide and show details on demand

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

1 files changed, 18 insertions, 0 deletions

diff --git a/actualités.html b/actualités.html
index 937b83e..136f089 100644
--- 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">