Make service listing details togglable

This commit is contained in:
Mikkel Munch Mortensen 2019-02-12 13:18:48 +01:00
parent c35ef76f9c
commit 509f927612
Signed by: decibyte
GPG key ID: 261C257C74AA764B
4 changed files with 23 additions and 4 deletions

View file

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

View file

@ -13,10 +13,10 @@ 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>
<section class="service-details">
<p>Hosting af <a href="https://da.wikipedia.org/wiki/Git">git-versionsstyringssystem</a>. Skriver du kode eller anden tekst som du gerne vil holde under versionsstyring, kan du gemme det her.</p>
<p>Skriver du kode eller anden tekst som du gerne vil holde under versionsstyring, kan du gemme det her.</p>
<h4>Badges</h4>
<ul class="badges">
<li>
@ -63,10 +63,10 @@ en uddybning af [hvad de forskellige badges dækker over](/tjenester/badges/).
</section>
### [Passit](https://passit.data.coop/)
### [Passit](https://passit.data.coop/) password manager
<section class="service-details">
<p>Password manager. Hjælper dig med at huske stærke, unikke kodeord til alle de sites og apps du benytter dig af.</p>
<p>Hjælper dig med at huske stærke, unikke kodeord til alle de sites og apps du benytter dig af.</p>
<h4>Badges</h4>
<ul class="badges">
<li>

View file

@ -64,3 +64,7 @@
.service-details ul.badges li {
margin: .5em 0;
}
.hidden {
display: none;
}

14
js/datacoop.js Normal file
View file

@ -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");
}
}