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

src/pretix/static/pretixbase/js/details.js

@@ -14,12 +14,14 @@ $(function () {
             return false;
         }
         if (isOpen) {
+            $details.removeClass("details-open");
             $detailsNotSummary.stop().show().slideUp(500, function () {
                 $details.prop("open", false);
             });
         } else {
             $detailsNotSummary.stop().hide();
             $details.prop("open", true);
+            $details.addClass("details-open");
             $detailsNotSummary.slideDown();
         }
         e.preventDefault();
@@ -40,6 +42,8 @@ $(function () {
         $details.prop('open', typeof $details.attr('open') == 'string');
         if (!$details.prop('open')) {
             $detailsNotSummary.hide();
+        } else {
+            $details.addClass("details-open");
         }
         $detailsSummary.attr({
             'role': 'button',

src/pretix/static/pretixcontrol/js/ui/main.js

@@ -367,6 +367,8 @@ var form_handlers = function (el) {
 $(function () {
     "use strict";
 
+    $("body").removeClass("nojs");
+
     $("[data-formset]").formset(
         {
             animateForms: true,

src/pretix/static/pretixcontrol/scss/main.scss

@@ -406,7 +406,7 @@ body.loading #wrapper {
     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;
@@ -570,3 +570,25 @@ ul.pagination {
 .table-payment-providers > tbody > tr > td {
     vertical-align: middle;
 }
+
+
+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);
+}
+

src/pretix/static/pretixpresale/js/ui/main.js

@@ -97,6 +97,8 @@ var form_handlers = function (el) {
 $(function () {
     "use strict";
 
+    $("body").removeClass("nojs");
+
     $("input[data-toggle=radiocollapse]").change(function () {
         $($(this).attr("data-parent")).find(".collapse.in").collapse('hide');
         $($(this).attr("data-target")).collapse('show');

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";