From 5a80427fb92d540c0e24749df2afa768c8ec5fa1 Mon Sep 17 00:00:00 2001
From: Hadrian Tang <hadrianwttang@outlook.com>
Date: Wed, 14 Feb 2024 01:10:59 +0800
Subject: [PATCH] Let's try <details> <summary> again

---
 _pages/Year_1_Course_Guide/seng_guide.css | 20 ++-----
 _pages/Year_1_Course_Guide/seng_guide.md  | 72 +++++++++++------------
 2 files changed, 41 insertions(+), 51 deletions(-)

diff --git a/_pages/Year_1_Course_Guide/seng_guide.css b/_pages/Year_1_Course_Guide/seng_guide.css
index 56bd16a..4ec8703 100644
--- a/_pages/Year_1_Course_Guide/seng_guide.css
+++ b/_pages/Year_1_Course_Guide/seng_guide.css
@@ -1,5 +1,4 @@
-/* Triangle inserted before each <label> that is child of class=".collapsible" (:first-child here because auto-wrapping of <p>) */
-.collapsible > :first-child label:before {
+summary:before {
     content: " ";
     border-width: 6px;
     border-style: solid;
@@ -12,8 +11,7 @@
     transform-origin: 2px center;
 }
 
-/* For each <label> that is child of class=".collapsible" */
-.collapsible > :first-child label {
+summary {
     background-color: aquamarine;
     display: flex;
     align-items: center;
@@ -22,27 +20,19 @@
     cursor: pointer;
 }
 
-/* For all children after <label> for class=".collapsible" */
-.collapsible > :not(:first-child) {
+details > :not(summary) {
     margin: 0px;
     padding: 0px;
     opacity: 0;
     height: 0;
     overflow: hidden;
 }
-  
-/* For all <input> inside <label> for class=".collapsible" */
-.collapsible > :first-child input {
-    display: none;
-}
 
-/* When checked: .collapsible > :first-child:before */
-.collapsible > :first-child label:has(input:checked):before {
+details[open] summary:before {
     transform: rotate(90deg);
 }
 
-/* When checked: .collapsible > :not(:first-child) */
-.collapsible:has(input:checked) > :not(:first-child) {
+details[open] > :not(:first-child) {
     padding: 10px;
     opacity: 1;
     height: auto;
diff --git a/_pages/Year_1_Course_Guide/seng_guide.md b/_pages/Year_1_Course_Guide/seng_guide.md
index 18f5800..785c095 100644
--- a/_pages/Year_1_Course_Guide/seng_guide.md
+++ b/_pages/Year_1_Course_Guide/seng_guide.md
@@ -74,8 +74,8 @@ For the latest information, refer to [major requirements](https://prog-crs.hkust
 <!-- Edit this file for collapsible displays -->
 <link rel="stylesheet" href="seng_guide.css">
 
-<div class="collapsible" markdown="1">
-<label><input type="checkbox">BIEN</label>
+<details>
+<summary>BIEN</summary>
 
 - [BIEN1010](https://ust.space/review/BIEN1010) (Spring) \[3\] > [CENG1000](https://ust.space/review/CENG1000) (Fall) \[3\]
 - [CHEM1020](https://ust.space/review/CHEM1020) \[3\] + CHEM1050 \[1\]
@@ -83,48 +83,48 @@ For the latest information, refer to [major requirements](https://prog-crs.hkust
 - [BIEN2410](https://ust.space/review/BIEN2410) (Spring) \[3\] (if DSE Biology >= 3 or LIFS1901 in Fall)
 - [CENG2220](https://ust.space/review/CENG2220) (Spring) \[3\]
 
-</div>
+</details>
 
-<div class="collapsible" markdown="1">
-<label><input type="checkbox">CENG</label>
+<details>
+<summary>CENG</summary>
 
 - [BIEN1010](https://ust.space/review/BIEN1010) (Spring) \[3\] > CENG1600 (Fall) \[3\] > CENG1700 (Fall) \[3\]
 - [CENG1500](https://ust.space/review/CENG1500) (Spring) \[3\] > [CENG1000](https://ust.space/review/CENG1000) (Fall) \[3\]
 - [CHEM1020](https://ust.space/review/CHEM1020) \[3\]
 - [CENG2220](https://ust.space/review/CENG2220) (Spring) \[3\]
 
-</div>
+</details>
 
-<div class="collapsible" markdown="1">
-<label><input type="checkbox">CEEV</label>
+<details>
+<summary>CEEV</summary>
 
 - [CENG1700](https://ust.space/review/CENG1700) (Fall) \[3\]
 - [CENG1500](https://ust.space/review/CENG1500) (Spring) \[3\] > [CENG1000](https://ust.space/review/CENG1000) (Fall) \[3\]
 - [CHEM1020](https://ust.space/review/CHEM1020) \[3\]
 - [CENG2220](https://ust.space/review/CENG2220) (Spring) \[3\]
 
-</div>
+</details>
 
-<div class="collapsible" markdown="1">
-<label><input type="checkbox">SUSEE</label>
+<details>
+<summary>SUSEE</summary>
 
 - [MECH1902](https://ust.space/review/MECH1902) (Fall) \[3\] > [CENG1700](https://ust.space/review/CENG1700) (Fall) \[3\] = [SUST1000](https://ust.space/review/SUST1000) \[3\]
 - ENEG3110 (Fall) \[3\]
 - [CHEM1020](https://ust.space/review/CHEM1020) \[3\]
 
-</div>
+</details>
 
-<div class="collapsible" markdown="1">
-<label><input type="checkbox">CIVL/CIEV</label>
+<details>
+<summary>CIVL/CIEV</summary>
 
 - [CIVL1100](https://ust.space/review/CIVL1100) \[3\]
 - [CIVL2110](https://ust.space/review/CIVL2110) (Spring) \[3\]
 - [CHEM1020](https://ust.space/review/CHEM1020) \[3\]
 
-</div>
+</details>
 
-<div class="collapsible" markdown="1">
-<label><input type="checkbox">COMP/CPEG/DSCT</label>
+<details>
+<summary>COMP/CPEG/DSCT</summary>
 
 Remark: You can access COMP course pages with <https://course.cse.ust.hk/\[insert_course_code\>] **even if you're not enrolled in it**
 
@@ -136,10 +136,10 @@ Remark: You can access COMP course pages with <https://course.cse.ust.hk/\[inser
   - [COMP2711H](https://ust.space/review/COMP2711H) \[4\] if you can meet the prerequisite
   - Remark: WIP
 
-</div>
+</details>
 
-<div class="collapsible" markdown="1">
-<label><input type="checkbox">CPEG/ELEC</label>
+<details>
+<summary>CPEG/ELEC</summary>
 
 - [ELEC1100](https://ust.space/review/ELEC1100) \[4\]
 - [ELEC1200](https://ust.space/review/ELEC1200) (Spring) for ELEC only \[4\]
@@ -147,10 +147,10 @@ Remark: You can access COMP course pages with <https://course.cse.ust.hk/\[inser
   - [PHYS1114](https://ust.space/review/PHYS1114) \[3\]
   - [PHYS1314](https://ust.space/review/PHYS1314) \[3\] (if and only if you are a PHYS god)
 
-</div>
+</details>
 
-<div class="collapsible" markdown="1">
-<label><input type="checkbox">DA/IEEM</label>
+<details>
+<summary>DA/IEEM</summary>
 
 - one of
   - [ECON2103](https://ust.space/review/ECON2103) \[3\] (if HKDSE Economics < 3)
@@ -158,10 +158,10 @@ Remark: You can access COMP course pages with <https://course.cse.ust.hk/\[inser
 - [IEDA3230](https://ust.space/review/IEDA3230) (Spring) \[3\]
 - [IEDA3300](https://ust.space/review/IEDA3300) (if available, Spring) \[3\]
 
-</div>
+</details>
 
-<div class="collapsible" markdown="1">
-<label><input type="checkbox">ISDN</label>
+<details>
+<summary>ISDN</summary>
 
 Remark: don't expect good grades in ISDN, and grades won't matter for getting into it since the major is _project-based_
 
@@ -173,10 +173,10 @@ Remark: don't expect good grades in ISDN, and grades won't matter for getting in
 - [ISDN2602](https://ust.space/review/ISDN2602) (when available) \[3\]
 - [ISDN2603](https://ust.space/review/ISDN2603) (Fall) \[3\]
 
-</div>
+</details>
 
-<div class="collapsible" markdown="1">
-<label><input type="checkbox">AE/MECH</label>
+<details>
+<summary>AE/MECH</summary>
 
 - one of
   - [CHEM1008](https://ust.space/review/CHEM1008) \[3\]
@@ -186,20 +186,20 @@ Remark: don't expect good grades in ISDN, and grades won't matter for getting in
 - [MECH1907](https://ust.space/review/MECH1907) (Fall) \[3\]
 - [MECH2410](https://ust.space/review/MECH2410) (Spring) \[3\]
 
-</div>
+</details>
 
-<div class="collapsible" markdown="1">
-<label><input type="checkbox">EVMT</label>
+<details>
+<summary>EVMT</summary>
 
 - [ENVR1170](https://ust.space/review/ENVR1170) (Spring) \[3\]
 - [ENVR2010](https://ust.space/review/ENVR2010) (Fall) \[3\]
 - [ENVR3310](https://ust.space/review/ENVR3310) (Spring) \[3\]
 - [ENVR3420](https://ust.space/review/ENVR3420) (Fall) \[3\]
 
-</div>
+</details>
 
-<div class="collapsible" markdown="1">
-<label><input type="checkbox">RMBI</label>
+<details>
+<summary>RMBI</summary>
 
 - [ACCT2010](https://ust.space/review/ACCT2010) \[3\]
 - one of
@@ -212,7 +212,7 @@ Remark: don't expect good grades in ISDN, and grades won't matter for getting in
 - [MGMT2010](https://ust.space/review/MGMT2010) \[2\]
 - [MGMT2130](https://ust.space/review/MGMT2130) \[2\]
 
-</div>
+</details>
 
 ### Additional