diff --git a/core/static/bundled/core/accordion-index.ts b/core/static/bundled/core/accordion-index.ts
new file mode 100644
index 00000000..39e37564
--- /dev/null
+++ b/core/static/bundled/core/accordion-index.ts
@@ -0,0 +1,25 @@
+const setMaxHeight = (element: HTMLDetailsElement) => {
+  element.setAttribute("style", `max-height: ${element.scrollHeight}px`);
+};
+
+// Initialize max-height at load
+window.addEventListener("DOMContentLoaded", () => {
+  for (const el of document.querySelectorAll("details.accordion")) {
+    setMaxHeight(el as HTMLDetailsElement);
+  }
+});
+
+// Accordion opened
+new MutationObserver((mutations: MutationRecord[]) => {
+  for (const mutation of mutations) {
+    const target = mutation.target as HTMLDetailsElement;
+    if (target.tagName !== "DETAILS" || !target.classList.contains("accordion")) {
+      continue;
+    }
+    setMaxHeight(target);
+  }
+}).observe(document.body, {
+  attributes: true,
+  attributeFilter: ["open"],
+  subtree: true,
+});
diff --git a/core/static/core/accordion.scss b/core/static/core/accordion.scss
new file mode 100644
index 00000000..07793a7a
--- /dev/null
+++ b/core/static/core/accordion.scss
@@ -0,0 +1,55 @@
+details.accordion>summary {
+  margin: 2px 0 0 0;
+  padding: .5em .5em .5em .7em;
+  cursor: pointer;
+  user-select: none;
+  display: block;
+
+  border-top-right-radius: 3px;
+  border-top-left-radius: 3px;
+}
+
+details[open].accordion>summary {
+  border: 1px solid #003eff;
+  background: #007fff;
+  color: #ffffff;
+}
+
+
+details:not([open]).accordion>summary {
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+
+  border: 1px solid #c5c5c5;
+  background: #f6f6f6;
+  color: #454545;
+}
+
+details.accordion>summary::before {
+  font-family: FontAwesome;
+  content: '\f0da';
+  margin-right: 5px;
+  transition: 700ms;
+  font-size: 0.8em;
+}
+
+details[open]>summary::before {
+  font-family: FontAwesome;
+  content: '\f0d7';
+}
+
+// ::details-content isn't available on firefox yet
+// we use .accordion-content as a workaround
+details.accordion>.accordion-content {
+  background: #ffffff;
+  color: #333333;
+  padding: 1em 2.2em;
+  overflow: auto;
+  border: 1px solid #dddddd;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+details.accordion {
+  transition: max-height 300ms ease-in-out;
+}
\ No newline at end of file
diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja
index 6479e833..e7b2b3ca 100644
--- a/core/templates/core/base.jinja
+++ b/core/templates/core/base.jinja
@@ -12,6 +12,7 @@
       <link rel="stylesheet" href="{{ static('core/header.scss') }}">
       <link rel="stylesheet" href="{{ static('core/navbar.scss') }}">
       <link rel="stylesheet" href="{{ static('core/pagination.scss') }}">
+      <link rel="stylesheet" href="{{ static('core/accordion.scss') }}">
 
       {% block jquery_css %}
         {# Thile file is quite heavy (around 250kb), so declaring it in a block allows easy removal #}
@@ -26,6 +27,7 @@
       <script type="module" src="{{ static('bundled/htmx-index.js') }}"></script>
       <script type="module" src="{{ static('bundled/country-flags-index.ts') }}"></script>
       <script type="module" src="{{ static('bundled/core/tooltips-index.ts') }}"></script>
+      <script type="module" src="{{ static('bundled/core/accordion-index.ts') }}"></script>
 
       <!-- Jquery declared here to be accessible in every django widgets -->
       <script src="{{ static('bundled/vendored/jquery.min.js') }}"></script>
diff --git a/core/templates/core/user_account.jinja b/core/templates/core/user_account.jinja
index 467f864a..a54c9bef 100644
--- a/core/templates/core/user_account.jinja
+++ b/core/templates/core/user_account.jinja
@@ -1,7 +1,7 @@
 {% extends "core/base.jinja" %}
 
 {% macro monthly(objects) %}
-  <div>
+  <div class="accordion-content">
     <table>
       <thead>
         <tr>
@@ -37,22 +37,28 @@
   {% if customer %}
     <h3>{% trans %}User account{% endtrans %}</h3>
     <p>{% trans %}Amount: {% endtrans %}{{ customer.amount }} €</p>
-    <div id="drop">
-      {% if buyings_month %}
-        <h5>{% trans %}Account purchases{% endtrans %}</h5>
+    {% if buyings_month %}
+      <details class="accordion" name="account" open>
+        <summary>{% trans %}Account purchases{% endtrans %}</summary>
         {{ monthly(buyings_month) }}
-      {% endif %}
-      {% if refilling_month %}
-        <h5>{% trans %}Reloads{% endtrans %}</h5>
+      </details>
+    {% endif %}
+    {% if refilling_month %}
+      <details class="accordion" name="account">
+        <summary>{% trans %}Reloads{% endtrans %}</summary>
         {{ monthly(refilling_month) }}
-      {% endif %}
-      {% if invoices_month %}
-        <h5>{% trans %}Eboutic invoices{% endtrans %}</h5>
+      </details>
+    {% endif %}
+    {% if invoices_month %}
+      <details class="accordion" name="account">
+        <summary>{% trans %}Eboutic invoices{% endtrans %}</summary>
         {{ monthly(invoices_month) }}
-      {% endif %}
-      {% if etickets %}
-        <h4>{% trans %}Etickets{% endtrans %}</h4>
-        <div>
+      </details>
+    {% endif %}
+    {% if etickets %}
+      <details class="accordion" name="account">
+        <summary>{% trans %}Etickets{% endtrans %}</summary>
+        <div class="accordion-content">
           <ul>
             {% for s in etickets %}
               <li>
@@ -63,22 +69,9 @@
             {% endfor %}
           </ul>
         </div>
-      {% endif %}
-    </div>
+      </details>
+    {% endif %}
   {% else %}
     <p>{% trans %}User has no account{% endtrans %}</p>
   {% endif %}
 {% endblock %}
-
-{% block script %}
-  {{ super() }}
-  <script>
-    $(function(){
-      $("#drop").accordion({
-        heightStyle: "content"
-      });
-    });
-  </script>
-{% endblock %}
-
-
diff --git a/core/templates/core/user_detail.jinja b/core/templates/core/user_detail.jinja
index 4ad1f5d9..57eb3bf7 100644
--- a/core/templates/core/user_detail.jinja
+++ b/core/templates/core/user_detail.jinja
@@ -254,13 +254,5 @@
         keys.shift();
       }
     });
-
-    $(function () {
-      $("#drop_gifts").accordion({
-        heightStyle: "content",
-        collapsible: true,
-        active: false
-      });
-    });
   </script>
 {% endblock %}
\ No newline at end of file
diff --git a/counter/static/bundled/counter/counter-click-index.ts b/counter/static/bundled/counter/counter-click-index.ts
index 5b593532..296c6003 100644
--- a/counter/static/bundled/counter/counter-click-index.ts
+++ b/counter/static/bundled/counter/counter-click-index.ts
@@ -103,7 +103,7 @@ document.addEventListener("alpine:init", () => {
       this.customerBalance += Number.parseFloat(
         (event.detail.target.querySelector("#id_amount") as HTMLInputElement).value,
       );
-      document.getElementById("selling-accordion").click();
+      document.getElementById("selling-accordion").setAttribute("open", "");
       this.codeField.widget.focus();
     },
 
@@ -139,12 +139,6 @@ document.addEventListener("alpine:init", () => {
 });
 
 $(() => {
-  /* Accordion UI between basket and refills */
-  // biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
-  ($("#click-form") as any).accordion({
-    heightStyle: "content",
-    activate: () => $(".focus").focus(),
-  });
   // biome-ignore lint/suspicious/noExplicitAny: dealing with legacy jquery
   ($("#products") as any).tabs();
 });
diff --git a/counter/templates/counter/counter_click.jinja b/counter/templates/counter/counter_click.jinja
index 0054f35d..24e1c6ae 100644
--- a/counter/templates/counter/counter_click.jinja
+++ b/counter/templates/counter/counter_click.jinja
@@ -51,185 +51,192 @@
     </div>
 
     <div id="click-form">
-      <h5 id="selling-accordion">{% trans %}Selling{% endtrans %}</h5>
-      <div>
-        {% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %}
+      <details class="accordion" id="selling-accordion" name="selling" open>
+        <summary>{% trans %}Selling{% endtrans %}</summary>
+        <div class="accordion-content">
+          {% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %}
 
-        <form method="post" action=""
-              class="code_form" @submit.prevent="handleCode">
+          <form method="post" action=""
+                class="code_form" @submit.prevent="handleCode">
 
-          <counter-product-select name="code" x-ref="codeField" autofocus required placeholder="{% trans %}Select a product...{% endtrans %}">
-            <option value=""></option>
-            <optgroup label="{% trans %}Operations{% endtrans %}">
-              <option value="FIN">{% trans %}Confirm (FIN){% endtrans %}</option>
-              <option value="ANN">{% trans %}Cancel (ANN){% endtrans %}</option>
-            </optgroup>
-            {% for category in categories.keys() %}
-              <optgroup label="{{ category }}">
-                {% for product in categories[category] %}
-                  <option value="{{ product.id }}">{{ product }}</option>
-                {% endfor %}
+            <counter-product-select name="code" x-ref="codeField" autofocus required placeholder="{% trans %}Select a product...{% endtrans %}">
+              <option value=""></option>
+              <optgroup label="{% trans %}Operations{% endtrans %}">
+                <option value="FIN">{% trans %}Confirm (FIN){% endtrans %}</option>
+                <option value="ANN">{% trans %}Cancel (ANN){% endtrans %}</option>
               </optgroup>
-            {% endfor %}
-          </counter-product-select>
+              {% for category in categories.keys() %}
+                <optgroup label="{{ category }}">
+                  {% for product in categories[category] %}
+                    <option value="{{ product.id }}">{{ product }}</option>
+                  {% endfor %}
+                </optgroup>
+              {% endfor %}
+            </counter-product-select>
 
-          <input type="submit" value="{% trans %}Go{% endtrans %}"/>
-        </form>
+            <input type="submit" value="{% trans %}Go{% endtrans %}"/>
+          </form>
 
-        {% for error in form.non_form_errors() %}
-          <div class="alert alert-red">
-            {{ error }}
-          </div>
-        {% endfor %}
-        <p>{% trans %}Basket: {% endtrans %}</p>
+          {% for error in form.non_form_errors() %}
+            <div class="alert alert-red">
+              {{ error }}
+            </div>
+          {% endfor %}
+          <p>{% trans %}Basket: {% endtrans %}</p>
 
-        <form x-cloak method="post" action="" x-ref="basketForm">
+          <form x-cloak method="post" action="" x-ref="basketForm">
 
-          <div class="basket-error-container">
+            <div class="basket-error-container">
+              <div
+                x-cloak
+                class="alert alert-red basket-error"
+                x-show="alertMessage.show"
+                x-transition.duration.500ms
+                x-text="alertMessage.content"
+              ></div>
+            </div>
+
+            {% csrf_token %}
+            <div x-ref="basketManagementForm">
+              {{ form.management_form }}
+            </div>
+            <ul>
+              <li x-show="getBasketSize() === 0">{% trans %}This basket is empty{% endtrans %}</li>
+              <template x-for="(item, index) in Object.values(basket)">
+                <li>
+                  <template x-for="error in item.errors">
+                    <div class="alert alert-red" x-text="error">
+                    </div>
+                  </template>
+
+                  <button @click.prevent="addToBasketWithMessage(item.product.id, -1)">-</button>
+                  <span class="quantity" x-text="item.quantity"></span>
+                  <button @click.prevent="addToBasketWithMessage(item.product.id, 1)">+</button>
+
+                  <span x-text="item.product.name"></span> :
+                  <span x-text="item.sum().toLocaleString(undefined, { minimumFractionDigits: 2 })">€</span>
+                  <span x-show="item.getBonusQuantity() > 0" x-text="`${item.getBonusQuantity()} x P`"></span>
+
+                  <button
+                    class="remove-item"
+                    @click.prevent="removeFromBasket(item.product.id)"
+                  ><i class="fa fa-trash-can delete-action"></i></button>
+
+                  <input
+                    type="hidden"
+                    :value="item.quantity"
+                    :id="`id_form-${index}-quantity`"
+                    :name="`form-${index}-quantity`"
+                    required
+                    readonly
+                  >
+                  <input
+                    type="hidden"
+                    :value="item.product.id"
+                    :id="`id_form-${index}-id`"
+                    :name="`form-${index}-id`"
+                    required
+                    readonly
+                  >
+                </li>
+              </template>
+            </ul>
+
+            <p class="margin-bottom">
+              <strong>Total: </strong>
+              <strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
+              <strong> €</strong>
+            </p>
+
+            <div class="row">
+              <input
+                class="btn btn-blue"
+                type="submit"
+                @click.prevent="finish"
+                :disabled="getBasketSize() === 0"
+                value="{% trans %}Finish{% endtrans %}"
+              />
+              <input
+                class="btn btn-grey"
+                type="submit" @click.prevent="cancel"
+                value="{% trans %}Cancel{% endtrans %}"
+              />
+            </div>
+          </form>
+        </div>
+      </details>
+      <details class="accordion" name="selling">
+        <summary>{% trans %}Refilling{% endtrans %}</summary>
+        {% if object.type == "BAR" %}
+          {% if refilling_fragment %}
             <div
-              x-cloak
-              class="alert alert-red basket-error"
-              x-show="alertMessage.show"
-              x-transition.duration.500ms
-              x-text="alertMessage.content"
-            ></div>
-          </div>
+              class="accordion-content"
+              @htmx:after-request="onRefillingSuccess"
+            >
+              {{ refilling_fragment }}
+            </div>
+          {% else %}
+            <div class="accordion-content">
+              <p class="alert alert-yellow">
+                {% trans trimmed %}
+                  As a barman, you are not able to refill any account on your own.
+                  An admin should be connected on this counter for that.
+                  The customer can refill by using the eboutic.
+                {% endtrans %}
+              </p>
+            </div>
+          {% endif %}
+          </details>
+          {% if student_card_fragment %}
+            <details class="accordion" name="selling">
+              <summary>{% trans %}Student card{% endtrans %}</summary>
+              <div class="accordion-content">
+                {{ student_card_fragment }}
+              </div>
+            </details>
+          {% endif %}
 
-          {% csrf_token %}
-          <div x-ref="basketManagementForm">
-            {{ form.management_form }}
-          </div>
-          <ul>
-            <li x-show="getBasketSize() === 0">{% trans %}This basket is empty{% endtrans %}</li>
-            <template x-for="(item, index) in Object.values(basket)">
-              <li>
-                <template x-for="error in item.errors">
-                  <div class="alert alert-red" x-text="error">
-                  </div>
-                </template>
-
-                <button @click.prevent="addToBasketWithMessage(item.product.id, -1)">-</button>
-                <span class="quantity" x-text="item.quantity"></span>
-                <button @click.prevent="addToBasketWithMessage(item.product.id, 1)">+</button>
-
-                <span x-text="item.product.name"></span> :
-                <span x-text="item.sum().toLocaleString(undefined, { minimumFractionDigits: 2 })">€</span>
-                <span x-show="item.getBonusQuantity() > 0" x-text="`${item.getBonusQuantity()} x P`"></span>
-
-                <button
-                  class="remove-item"
-                  @click.prevent="removeFromBasket(item.product.id)"
-                ><i class="fa fa-trash-can delete-action"></i></button>
-
-                <input
-                  type="hidden"
-                  :value="item.quantity"
-                  :id="`id_form-${index}-quantity`"
-                  :name="`form-${index}-quantity`"
-                  required
-                  readonly
-                >
-                <input
-                  type="hidden"
-                  :value="item.product.id"
-                  :id="`id_form-${index}-id`"
-                  :name="`form-${index}-id`"
-                  required
-                  readonly
-                >
-              </li>
-            </template>
-          </ul>
-
-          <p class="margin-bottom">
-            <strong>Total: </strong>
-            <strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
-            <strong> €</strong>
-          </p>
-
-          <div class="row">
-            <input
-              class="btn btn-blue"
-              type="submit"
-              @click.prevent="finish"
-              :disabled="getBasketSize() === 0"
-              value="{% trans %}Finish{% endtrans %}"
-            />
-            <input
-              class="btn btn-grey"
-              type="submit" @click.prevent="cancel"
-              value="{% trans %}Cancel{% endtrans %}"
-            />
-          </div>
-        </form>
+        {% endif %}
       </div>
-      {% if object.type == "BAR" %}
-        <h5>{% trans %}Refilling{% endtrans %}</h5>
-        {% if refilling_fragment %}
-          <div
-            @htmx:after-request="onRefillingSuccess"
-          >
-            {{ refilling_fragment }}
+
+      <div id="products">
+        {% if not products %}
+          <div class="alert alert-red">
+            {% trans %}No products available on this counter for this user{% endtrans %}
           </div>
         {% else %}
-          <div>
-            <p class="alert alert-yellow">
-              {% trans trimmed %}
-                As a barman, you are not able to refill any account on your own.
-                An admin should be connected on this counter for that.
-                The customer can refill by using the eboutic.
-              {% endtrans %}
-            </p>
-          </div>
-        {% endif %}
-        {% if student_card_fragment %}
-          <h5>{% trans %}Student card{% endtrans %}</h3>
-          <div>
-            {{ student_card_fragment }}
-          </div>
-        {% endif %}
-
-      {% endif %}
-    </div>
-
-    <div id="products">
-      {% if not products %}
-        <div class="alert alert-red">
-          {% trans %}No products available on this counter for this user{% endtrans %}
-        </div>
-      {% else %}
-        <ul>
+          <ul>
+            {% for category in categories.keys() -%}
+              <li><a href="#cat_{{ category|slugify }}">{{ category }}</a></li>
+            {%- endfor %}
+          </ul>
           {% for category in categories.keys() -%}
-            <li><a href="#cat_{{ category|slugify }}">{{ category }}</a></li>
-          {%- endfor %}
-        </ul>
-        {% for category in categories.keys() -%}
-          <div id="cat_{{ category|slugify }}">
-            <h5 class="margin-bottom">{{ category }}</h5>
-            <div class="row gap-2x">
-              {% for product in categories[category] -%}
-                <button class="card shadow" @click="addToBasketWithMessage('{{ product.id }}', 1)">
-                  <img
-                    class="card-image"
-                    alt="image de {{ product.name }}"
-                    {% if product.icon %}
-                      src="{{ product.icon.url }}"
-                    {% else %}
-                      src="{{ static('core/img/na.gif') }}"
-                    {% endif %}
-                  />
-                  <span class="card-content">
-                    <strong class="card-title">{{ product.name }}</strong>
-                    <p>{{ product.price }} €<br>{{ product.code }}</p>
-                  </span>
-                </button>
-              {%- endfor %}
+            <div id="cat_{{ category|slugify }}">
+              <h5 class="margin-bottom">{{ category }}</h5>
+              <div class="row gap-2x">
+                {% for product in categories[category] -%}
+                  <button class="card shadow" @click="addToBasketWithMessage('{{ product.id }}', 1)">
+                    <img
+                      class="card-image"
+                      alt="image de {{ product.name }}"
+                      {% if product.icon %}
+                        src="{{ product.icon.url }}"
+                      {% else %}
+                        src="{{ static('core/img/na.gif') }}"
+                      {% endif %}
+                    />
+                    <span class="card-content">
+                      <strong class="card-title">{{ product.name }}</strong>
+                      <p>{{ product.price }} €<br>{{ product.code }}</p>
+                    </span>
+                  </button>
+                {%- endfor %}
+              </div>
             </div>
-          </div>
-        {%- endfor %}
-      {% endif %}
+          {%- endfor %}
+        {% endif %}
+      </div>
     </div>
-  </div>
 {% endblock content %}
 
 {% block script %}
diff --git a/pedagogy/static/pedagogy/css/pedagogy.scss b/pedagogy/static/pedagogy/css/pedagogy.scss
index 51656615..ae09b122 100644
--- a/pedagogy/static/pedagogy/css/pedagogy.scss
+++ b/pedagogy/static/pedagogy/css/pedagogy.scss
@@ -17,6 +17,7 @@ $large-devices: 992px;
     margin-bottom: 0;
     margin-top: 0;
   }
+
   &.star-checked {
     color: $pedagogy-orange;
     margin-bottom: 0;
@@ -32,6 +33,7 @@ $large-devices: 992px;
       margin-left: 5px;
       margin-right: 5px;
     }
+
     &.star-checked {
       margin-left: 5px;
       margin-right: 5px;
@@ -42,6 +44,7 @@ $large-devices: 992px;
     &.grade-without-star {
       display: block;
     }
+
     &.grade-with-star {
       display: none;
     }
@@ -51,10 +54,12 @@ $large-devices: 992px;
     font-size: 1.1em;
 
     overflow-wrap: break-word;
+
     .closed td.title {
       color: lighten($black-color, 10%);
       font-style: italic;
     }
+
     td {
       text-align: center;
       border: none;
@@ -131,10 +136,12 @@ $large-devices: 992px;
     input[type="checkbox"] {
       display: none;
     }
+
     .radio-guide {
       margin-top: 10px;
       color: white;
     }
+
     .radio-guide label {
       display: inline-block;
       background-color: $pedagogy-blue;
@@ -143,12 +150,15 @@ $large-devices: 992px;
       font-size: 16px;
       border-radius: 4px;
     }
-    .radio-guide input[type="radio"]:checked + label {
+
+    .radio-guide input[type="radio"]:checked+label {
       background-color: $pedagogy-orange;
     }
-    .radio-guide input[type="checkbox"]:checked + label {
+
+    .radio-guide input[type="checkbox"]:checked+label {
       background-color: $pedagogy-orange;
     }
+
     .radio-guide label:hover {
       background-color: $pedagogy-hover-blue;
     }
@@ -219,12 +229,7 @@ $large-devices: 992px;
           "stars"
           "comment";
         }
-      }
 
-      .ui-accordion-content {
-        background-color: $white-color;
-        border-color: $pedagogy-orange;
-        border-right: none;
       }
 
       .form-stars {
@@ -235,16 +240,6 @@ $large-devices: 992px;
         grid-area: comment;
       }
 
-      .ui-accordion-header {
-        background-color: $pedagogy-orange;
-        color: $pedagogy-white-text;
-        clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
-
-        @media screen and (max-width: $large-devices) {
-          clip-path: none;
-        }
-      }
-
       .ui-accordion-header-icon {
         color: $pedagogy-white-text;
         margin-right: 10px;
@@ -282,7 +277,7 @@ $large-devices: 992px;
       background-color: $pedagogy-blue;
       padding-right: 10px;
 
-      > p {
+      >p {
         text-align: right;
         font-weight: bold;
       }
@@ -356,7 +351,7 @@ $large-devices: 992px;
         .grade-type {
           grid-area: grade-type;
 
-          > p {
+          >p {
             color: $pedagogy-white-text;
             font-weight: bold;
             text-align: right;
@@ -512,3 +507,20 @@ $large-devices: 992px;
     }
   }
 }
+
+details.accordion summary {
+
+  background: $pedagogy-orange !important;
+  color: $pedagogy-white-text !important;
+  clip-path: polygon(0 0%, 0 100%, 30% 100%, 33% 0);
+
+  @media screen and (max-width: $large-devices) {
+    clip-path: none;
+  }
+}
+
+details.accordion>.accordion-content {
+  background-color: $white-color;
+  border-color: $pedagogy-orange;
+  border-right: none;
+}
\ No newline at end of file
diff --git a/pedagogy/templates/pedagogy/uv_detail.jinja b/pedagogy/templates/pedagogy/uv_detail.jinja
index a5b07f68..9b164583 100644
--- a/pedagogy/templates/pedagogy/uv_detail.jinja
+++ b/pedagogy/templates/pedagogy/uv_detail.jinja
@@ -90,9 +90,9 @@
           <p>{% trans %}You already posted a comment on this UV. If you want to comment again, please modify or delete your previous comment.{% endtrans %}</p>
         </div>
       {% elif user.has_perm("pedagogy.add_uvcomment") %}
-        <div id="leave_comment">
-          <h2>{% trans %}Leave comment{% endtrans %}</h2>
-          <div>
+        <details class="accordion" id="leave_comment">
+          <summary>{% trans %}Leave comment{% endtrans %}</summary>
+          <div class="accordion-content">
             <form action="{{ url('pedagogy:uv_detail', uv_id=object.id) }}" method="post" enctype="multipart/form-data">
               {% csrf_token %}
               <div class="leave-comment-grid-container">
@@ -142,7 +142,7 @@
               <p><input type="submit" value="{% trans %}Comment{% endtrans %}" /></p>
             </form>
           </div>
-        </div>
+        </details>
       {% endif %}
       <br>
 
@@ -221,21 +221,5 @@
   <script type="text/javascript">
     $("#return_noscript").hide();
     $("#return_js").show();
-    const icons = {
-      header: "fa fa-toggle-right",
-      activeHeader: "fa fa-toggle-down"
-    };
-    $(function(){
-      $("#leave_comment").accordion({
-        icons: icons,
-        heightStyle: "content",
-        active: false,
-        collapsible: true
-      });
-    });
-	// Remove jquery-ui icons to make fontawesome work
-    $(document).ready(function(){
-      $(".ui-accordion-header-icon").first().removeClass("ui-icon");
-    });
   </script>
 {% endblock %}