Goodbye accordian.js :)

Zemaneh-Yosef · Dec 24, 2024 · 1c5f35e · 1c5f35e
1 parent 2f9afda
commit 1c5f35e
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 154 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -162,7 +162,6 @@ <h5 class="modal-title" id="aboutModalLabel">Credits</h5>
 		{% include modals/calendar.html %}
 		{% endcomment %}
 		{% include modals/mobile.html %}
-		{% if page.accordian %}<script src="/assets/js/misc/accordian.js"></script>{% endif %}
 		{% if page.chaiTable %}
 		{% include modals/chaiTable.html %}
 		{% include toasts/failToast.html toastId="ctFailToast" errorText="ChaiTable did not return a table. Please be in contact with us to check what went wrong." %}

diff --git a/assets/css/accordian.css b/assets/css/accordian.css
@@ -19,6 +19,7 @@
 
 .accordian details {
   position: relative;
+  interpolate-size: allow-keywords;
 }
 
 .accordian summary .timeDisplay {
@@ -82,13 +83,23 @@ body[dir=rtl] .accordian details[open] > summary .accordianText:before {
   transform: rotate(-90deg) translateX(3px) translateY(-3px);
 }
 
+.accordian details::details-content {
+  background: white;
+  overflow-y: scroll;
+  transition:
+    block-size .25s cubic-bezier(.4,0,.2,1),
+    content-visibility .25s cubic-bezier(.4,0,.2,1) allow-discrete;
+  block-size: 0;
+}
+
 .accordian .accordianContent {
   padding: 10px;
   border: 2px solid var(--bs-card-bg);
   border-top: none;
-  background: white;
-  max-height: 35vh;
-  overflow: scroll;
+}
+
+.accordian details[open]::details-content {
+  block-size: 35vh;
 }
 
 .accordian .accordianContent hr:last-child {

diff --git a/assets/css/dark.css b/assets/css/dark.css
@@ -25,7 +25,7 @@
   background-color: #373E5C;
 }
 
-.accordian .accordianContent {
+.accordian details::details-content {
   background: #303030;
 }
 

diff --git a/assets/js/misc/accordian.js b/assets/js/misc/accordian.js