Remove jquery-ui accordions

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;
+}

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 %}