Make service listing details togglable

Preparations for collapsable service details.

_layouts/default.html

@@ -46,5 +46,6 @@
         </footer>
       </div>
     </div>
+    <script type="text/javascript" src="/js/datacoop.js"></script>
   </body>
 </html>

_pages/tjenester.md

@@ -13,13 +13,12 @@ en uddybning af [hvad de forskellige badges dækker over](/tjenester/badges/).
 
 ## Tjenester der er åbne for alle
 
-### [Gitea](https://git.data.coop/)
+### [Gitea](https://git.data.coop/) – hosting af <a href="https://da.wikipedia.org/wiki/Git">git-versionsstyringssystem</a>
 
-Hosting af [git-versionsstyringssystem](https://da.wikipedia.org/wiki/Git).
+<section class="service-details">
-
+    <p>Skriver du kode eller anden tekst som du gerne vil holde under versionsstyring, kan du gemme det her.</p>
-#### Badges
+    <h4>Badges</h4>
-
+    <ul class="badges">
-<ul class="badges">
         <li>
             <span class="badge badge-positive badge-secure-connection">Positiv:</span>
             <a href="/tjenester/badges/#sikker-forbindelse">
@@ -56,20 +55,20 @@ Hosting af [git-versionsstyringssystem](https://da.wikipedia.org/wiki/Git).
                 Anonym adgang
             </a>[1]
         </li>
-</ul>
+    </ul>
 
-<p class="badge-notes">
+    <p class="badge-notes">
         [1] Offentligt tilgængelige repositories kan tilgås af alle, uden at være logget ind.
-</p>
+    </p>
+</section>
 
 
-### [Passit](https://passit.data.coop/)
+### [Passit](https://passit.data.coop/) – password manager
 
-Password manager (kodeordshusker).
+<section class="service-details">
-
+    <p>Hjælper dig med at huske stærke, unikke kodeord til alle de sites og apps du benytter dig af.</p>
-#### Badges
+    <h4>Badges</h4>
-
+    <ul class="badges">
-<ul class="badges">
         <li>
             <span class="badge badge-positive badge-secure-connection">Positiv:</span>
             <a href="/tjenester/badges/#sikker-forbindelse">
@@ -106,8 +105,9 @@ Password manager (kodeordshusker).
                 Der er <em>ikke</em> anonym adgang
             </a>
         </li>
-</ul>
+    </ul>
 
-<p class="badge-notes">
+    <p class="badge-notes">
         [1] Al brugerdata (navne, websites, kodeord, noter osv.) er krypteret så det kun er brugerne selv der kan tilgå deres data. Der foretages dog stadig logning af brugen af tjenesten, så helt 100% ZN er det ikke.
-</p>
+    </p>
+</section>

_sass/_datacoop.scss

@@ -55,12 +55,16 @@
     font-size: .75em;
 }
 
-ul.badges {
+.service-details ul.badges {
     list-style-type: none;
     margin: 0 0 0 .5em;
     padding: 0;
 }
 
-ul.badges li {
+.service-details ul.badges li {
     margin: .5em 0;
 }
+
+.hidden {
+    display: none;
+}

assets/css/style.scss

@@ -300,4 +300,4 @@ table th
 // ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
 @import "highlights";
 @import "svg-icons";
-@import "badges";
+@import "datacoop";

js/datacoop.js

@@ -0,0 +1,14 @@
+window.onload = function(e) {
+    var details = document.querySelectorAll("section.service-details");
+    for (var detail of details) {
+        var toggle = document.createElement("a");
+        toggle.text = "Læs mere";
+        toggle.onclick = function(e) {
+            e.preventDefault();
+            var hide = e.target.previousSibling.classList.toggle("hidden");
+            e.target.text = hide ? "Læs mere" : "Skjul detaljer";
+        }
+        detail.insertAdjacentElement('afterend', toggle);
+        detail.classList.add("hidden");
+    }
+}