Use <details> and <summary> for variations

src/pretix/presale/templates/pretixpresale/base.html

@@ -25,6 +25,7 @@
         <script type="text/javascript" src="{% static "bootstrap/js/bootstrap.js" %}"></script>
         <script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
         <script type="text/javascript" src="{% static "pretixpresale/js/ui/main.js" %}"></script>
+        <script type="text/javascript" src="{% static "pretixpresale/js/ui/details.js" %}"></script>
         <script type="text/javascript" src="{% static "pretixbase/js/asynctask.js" %}"></script>
         <script type="text/javascript" src="{% static "pretixbase/js/asyncdownload.js" %}"></script>
         <script type="text/javascript" src="{% static "pretixpresale/js/ui/cart.js" %}"></script>

src/pretix/presale/templates/pretixpresale/event/index.html

@@ -217,8 +217,8 @@
                         {% endif %}
                         {% for item in tup.1 %}
                             {% if item.has_variations %}
-                                <div class="item-with-variations">
-                                    <div class="row-fluid product-row headline">
+                                <details class="item-with-variations" {% if event.settings.show_variations_expanded %}open{% endif %}>
+                                    <summary class="row-fluid product-row headline">
                                         <div class="col-md-8 col-xs-12">
                                             {% if item.picture %}
                                                 <a href="{{ item.picture.url }}" class="productpicture"
@@ -270,7 +270,7 @@
                                             {% endif %}
                                         </div>
                                         <div class="clearfix"></div>
-                                    </div>
+                                    </summary>
                                     <div class="variations {% if not event.settings.show_variations_expanded %}variations-collapsed{% endif %}">
                                         {% for var in item.available_variations %}
                                             <div class="row-fluid product-row variation">
@@ -348,7 +348,7 @@
                                             </div>
                                         {% endfor %}
                                     </div>
-                                </div>
+                                </details>
                             {% else %}
                                 <div class="row-fluid product-row simple">
                                     <div class="col-md-8 col-xs-12">

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

@@ -0,0 +1,51 @@
+/*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

@@ -103,11 +103,7 @@ $(function () {
     });
     $(".js-only").removeClass("js-only");
     $(".js-hidden").hide();
-    $(".variations-collapsed").hide();
-    $("a[data-toggle=variations]").click(function (e) {
-        $(this).closest(".item-with-variations").find(".variations").slideToggle();
-        e.preventDefault();
-    });
+
     $("div.collapsed").removeClass("collapsed").addClass("collapse");
     $(".has-error, .alert-danger").each(function () {
         $(this).closest("div.panel-collapse").collapse("show");

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

@@ -65,6 +65,20 @@
         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;
 }