Use <details> und <summary> instead of panel-collapse

src/pretix/static/pretixpresale/scss/_event.scss

@@ -65,19 +65,6 @@
         line-height: inherit;
     }
 }
-details.item-with-variations {
-    list-style: none;
-}
-details.item-with-variations > summary::-webkit-details-marker {
-  display: none;
-}
-
-details summary {
-    -moz-user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    user-select: none;
-}
 
 .radio .variation-description {
     padding-left: 20px;

src/pretix/static/pretixpresale/scss/main.scss

@@ -201,7 +201,7 @@ body.loading .container {
     transform: rotate(180deg);
 }
 
-.panel-title a[data-toggle="collapse"] {
+.panel-title a[data-toggle="collapse"], details h3.panel-title, details h4.panel-title {
     display: flex;
     padding: 10px 15px;
     margin: -10px -15px;
@@ -219,5 +219,26 @@ body.loading .container {
     background-color: darken($btn-primary-bg, 10%);
 }
 
+
+details {
+    list-style: none;
+}
+details > summary::-webkit-details-marker {
+    display: none;
+}
+
+details summary {
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+}
+.nojs details[open] .collapse-indicator, details.details-open .collapse-indicator {
+    -webkit-transform: rotate(180deg);
+    -ms-transform: rotate(180deg);
+    -moz-transform: rotate(180deg);
+    transform: rotate(180deg);
+}
+
 @import "_iframe.scss";
 @import "_a11y.scss";