From 7c3c6b7f218ac446cef53e431732c73a13660950 Mon Sep 17 00:00:00 2001
From: Asier Illarramendi <asier@illarra.com>
Date: Tue, 10 Dec 2024 17:18:27 +0100
Subject: [PATCH] Remove donate JS code in favor of CSS-only solution (#1902)

---
 sass/pages/_donate.scss | 18 ++++++++++++++++++
 static/donate.js        | 16 ----------------
 templates/donate.html   | 17 ++++++++---------
 3 files changed, 26 insertions(+), 25 deletions(-)
 delete mode 100644 static/donate.js

diff --git a/sass/pages/_donate.scss b/sass/pages/_donate.scss
index fd795607f6..f7bfa02724 100644
--- a/sass/pages/_donate.scss
+++ b/sass/pages/_donate.scss
@@ -237,3 +237,21 @@ div.donate-sponsor {
     text-align: center;
     margin-top: 4rem;
 }
+
+#membership {
+  display: block;
+}
+
+#corporate-sponsorship {
+  display: none;
+}
+
+@include state-checked("donate-view") {
+    #membership {
+        display: none;
+    }
+
+    #corporate-sponsorship {
+        display: block;
+    }
+}
diff --git a/static/donate.js b/static/donate.js
deleted file mode 100644
index 3dde6e45d8..0000000000
--- a/static/donate.js
+++ /dev/null
@@ -1,16 +0,0 @@
-function show_corporate() {
-    let corporate_membership = document.getElementById("corporate-sponsorship");
-    corporate_membership.style.display = "block";
-    
-    let membership = document.getElementById("membership");
-    membership.style.display = "none";
-
-}
-
-function show_membership() {
-    let corporate_membership = document.getElementById("corporate-sponsorship");
-    corporate_membership.style.display = "none";
-    
-    let membership = document.getElementById("membership");
-    membership.style.display = "block";
-}
\ No newline at end of file
diff --git a/templates/donate.html b/templates/donate.html
index 6c6eddceef..43511f8a2e 100644
--- a/templates/donate.html
+++ b/templates/donate.html
@@ -1,10 +1,6 @@
 {% import "macros/numbers.html" as numbers %}
 {% extends "layouts/base.html" %}
 
-{% block head_extensions %}
-    <script src="/donate.js"></script>
-{% endblock head_extensions %}
-
 {% block content %}
 
 {% set donors = load_data(path="content/donate/donors.toml") %}
@@ -83,6 +79,8 @@
     </div>
 </div>
 
+<input id="donate-view-state" class="hidden" type="checkbox">
+<div data-donate-view-state-container>
 <div id="membership">
 <h2 class="donate-header-padding">Membership</h2>
 <div class="donate-levels-container">
@@ -120,12 +118,12 @@ <h2 class="donate-header-padding">Membership</h2>
         {% endfor %}
     </div>
 </div>
-<button type="button" class="card donate-corporate-button" onclick="show_corporate()">
+<label for="donate-view-state" class="card donate-corporate-button">
     Corporate Tiers 
-</button>
+</label>
 </div>
 
-<div id="corporate-sponsorship" style="display: none">
+<div id="corporate-sponsorship">
 <h2 class="donate-header-padding">Corporate Sponsorship</h2>
 <div class="donate-membership-description">
 These tiers exist for individuals or organizations that want to support Bevy in a big way. We <i>highly</i> recommend using bank transfers for payments at these levels to avoid exorbitant credit card processor fees. Please <a href="mailto:support@bevyengine.org">contact us</a> if you have any questions, or if you would like to discuss other payment options!
@@ -166,9 +164,10 @@ <h2 class="donate-header-padding">Corporate Sponsorship</h2>
     {% endfor %}
 </div>
 </div>
-<button type="button" class="card donate-corporate-button" onclick="show_membership()">
+<label for="donate-view-state" class="card donate-corporate-button">
     Individual Tiers
-</button>
+</label>
+</div>
 </div>
 
 <div class="donate-faq-link"><a href="/donate/options">Click here</a> for more donation options and FAQs</div>