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

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

@@ -1,51 +0,0 @@
-/*global $ */
-
-$(function () {
-    "use strict";
-
-    var isOpera = Object.prototype.toString.call(window.opera) == '[object Opera]';
-
-    $("details summary, details summary a").click(function (e) {
-        var $details = $(this).closest("details");
-        var isOpen = $details.prop("open");
-        var $detailsNotSummary = $details.children(':not(summary)');
-        if ($detailsNotSummary.is(':animated')) {
-            e.preventDefault();
-            return false;
-        }
-        if (isOpen) {
-            $detailsNotSummary.stop().show().slideUp(500, function () {
-                $details.prop("open", false);
-            });
-        } else {
-            $detailsNotSummary.stop().hide();
-            $details.prop("open", true);
-            $detailsNotSummary.slideDown();
-        }
-        e.preventDefault();
-        return false;
-    }).keyup(function (event) {
-        if (32 == event.keyCode || (13 == event.keyCode && !isOpera)) {
-            // Space or Enter is pressed — trigger the `click` event on the `summary` element
-            // Opera already seems to trigger the `click` event when Enter is pressed
-            event.preventDefault();
-            $(this).click();
-        }
-    });
-
-    $('details').each(function () {
-        var $details = $(this),
-            $detailsSummary = $('summary', $details).first(),
-            $detailsNotSummary = $details.children(':not(summary)');
-        $details.prop('open', typeof $details.attr('open') == 'string');
-        if (!$details.prop('open')) {
-            $detailsNotSummary.hide();
-        }
-        $detailsSummary.attr({
-            'role': 'button',
-            'aria-controls': $details.attr('id')
-        }).prop('tabIndex', 0).bind('selectstart dragstart mousedown', function () {
-            return false;
-        });
-    });
-});

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