Add toggle script for details

This commit is contained in:
sqozz 2021-03-24 15:36:49 +01:00
parent 4bc1a909bb
commit 4e86d180a2
3 changed files with 17 additions and 4 deletions

View file

@ -11,7 +11,7 @@
<div class="player_count">Players Online: {{player_count}}/{{max_players}}</div>
<div class="items">
<div class="row">
<a class="item news" href="/news">
<a class="item news" onclick="return toggleDetails(this)">
<div class="icon"></div>
<div class="text">News</div>
</a>
@ -20,13 +20,13 @@
</div>
</div>
<div class="row">
<a class="item map" href="https://play.geekify.de">
<a class="item map" href="https://play.geekify.de" target="_blank">
<div class="icon"></div>
<div class="text">Map</div>
</a>
</div>
<div class="row">
<a class="item whitelist" href="/request">
<a class="item whitelist" id="whitelist" onclick="return toggleDetails(this)">
<div class="icon"></div>
<div class="text">Request Invite</div>
</a>
@ -41,5 +41,6 @@
</div>
</div>
</div>
<script src="/js/index.js"></script>
</body>
</html>

View file

@ -89,7 +89,9 @@ body {
}
.details {
display: flex;
/* Hidden by default */
/*display: flex;*/
display: none;
justify-content: center;
}

View file

@ -0,0 +1,10 @@
function toggleDetails(e) {
var parentElement = e.parentElement
var detailsElement = parentElement.querySelector(".details");
if (detailsElement.style.display === "none") {
detailsElement.style.display = "flex";
} else {
detailsElement.style.display = "none";
}
return false;
}