diff --git a/src/pretix/control/templates/pretixcontrol/base.html b/src/pretix/control/templates/pretixcontrol/base.html
index 5885c2a10d..764684016c 100644
--- a/src/pretix/control/templates/pretixcontrol/base.html
+++ b/src/pretix/control/templates/pretixcontrol/base.html
@@ -42,6 +42,7 @@
             <script type="text/javascript" src="{% static "pretixcontrol/js/ui/mail.js" %}"></script>
             <script type="text/javascript" src="{% static "pretixcontrol/js/ui/typeahead.js" %}"></script>
             <script type="text/javascript" src="{% static "pretixcontrol/js/ui/quicksetup.js" %}"></script>
+            <script type="text/javascript" src="{% static "pretixbase/js/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 "colorpicker/bootstrap-colorpicker.js" %}"></script>
@@ -53,7 +54,10 @@
         <link rel="icon" href="{% static "pretixbase/img/favicon.ico" %}">
         {% block custom_header %}{% endblock %}
 	</head>
-	<body data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}" data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}" data-payment-weekdays-disabled="{{ js_payment_weekdays_disabled }}" data-select2-locale="{{ select2locale }}" data-longdateformat="{{ js_long_date_format }}">
+	<body data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}"
+            data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}"
+            data-payment-weekdays-disabled="{{ js_payment_weekdays_disabled }}"
+            data-select2-locale="{{ select2locale }}" data-longdateformat="{{ js_long_date_format }}" class="nojs">
         <div id="wrapper">
             <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
                 <div class="navbar-header">
diff --git a/src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html b/src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html
index a0a54fc625..95cddb600b 100644
--- a/src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html
+++ b/src/pretix/control/templates/pretixcontrol/event/mail_settings_fragment.html
@@ -1,16 +1,14 @@
 {% load i18n %}
 {% load bootstrap3 %}
 {% load mail_settings_preview %}
-<div class="panel panel-default">
-    <div class="panel-heading">
+<details class="panel panel-default">
+    <summary class="panel-heading">
         <h4 class="panel-title">
-            <a class="collapsed" data-toggle="collapse" href="#{{ pid }}">
-                <strong>{% trans title %}</strong>
-                <i class="fa fa-angle-down collapse-indicator"></i>
-            </a>
+            <strong>{% trans title %}</strong>
+            <i class="fa fa-angle-down collapse-indicator"></i>
         </h4>
-    </div>
-    <div id="{{ pid }}" class="panel-collapse collapse">
+    </summary>
+    <div id="{{ pid }}">
         <div class="panel-body">
             {% with exclude|split as exclusion %}
             {% with items|split as item_list %}
@@ -51,4 +49,4 @@
             {% endwith %}
         </div>
     </div>
-</div>
+</details>
diff --git a/src/pretix/control/templates/pretixcontrol/event/tax_edit.html b/src/pretix/control/templates/pretixcontrol/event/tax_edit.html
index 52b9550f47..b886838e16 100644
--- a/src/pretix/control/templates/pretixcontrol/event/tax_edit.html
+++ b/src/pretix/control/templates/pretixcontrol/event/tax_edit.html
@@ -21,16 +21,15 @@
         {% bootstrap_field form.name layout="control" %}
         {% bootstrap_field form.rate addon_after="%" layout="control" %}
 
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <details class="panel panel-default"
+                {% if rule.eu_reverse_charge or rule.has_custom_rules or form.errors %}open{% endif %}>
+            <summary class="panel-heading">
                 <h4 class="panel-title">
-                    <a data-toggle="collapse" href="#advanced">
-                        <strong>{% trans "Advanced settings" %}</strong>
-                        <i class="fa fa-angle-down collapse-indicator"></i>
-                    </a>
+                    <strong>{% trans "Advanced settings" %}</strong>
+                    <i class="fa fa-angle-down collapse-indicator"></i>
                 </h4>
-            </div>
-            <div id="advanced" class="panel-collapse collapsed {% if rule.eu_reverse_charge or rule.has_custom_rules or form.errors %}in{% endif %}">
+            </summary>
+            <div id="advanced">
                 <div class="panel-body">
                     <legend>{% trans "Advanced settings" %}</legend>
                     <div class="alert alert-legal">
@@ -111,7 +110,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </details>
 
 
         <div class="form-group submit-group">
diff --git a/src/pretix/control/templates/pretixcontrol/order/change_questions.html b/src/pretix/control/templates/pretixcontrol/order/change_questions.html
index 52956e1da9..bfb67b922d 100644
--- a/src/pretix/control/templates/pretixcontrol/order/change_questions.html
+++ b/src/pretix/control/templates/pretixcontrol/order/change_questions.html
@@ -19,38 +19,33 @@
         {% csrf_token %}
         <div class="panel-group" id="questions_accordion">
             {% if request.event.settings.invoice_address_asked %}
-                <div class="panel panel-default">
-                    <div class="panel-heading">
+                <details class="panel panel-default" open>
+                    <summary class="panel-heading">
                         <h4 class="panel-title">
-                            <a data-toggle="collapse" href="#invoice" data-parent="#questions_accordion">
-                                <strong>{% trans "Invoice information" %} {% if not request.event.settings.invoice_address_required %}
-                                    {% trans "(optional)" %}
-                                {% endif %}</strong>
-                                <i class="fa fa-angle-down collapse-indicator"></i>
-                            </a>
+                            <strong>{% trans "Invoice information" %} {% if not request.event.settings.invoice_address_required %}
+                                {% trans "(optional)" %}
+                            {% endif %}</strong>
+                            <i class="fa fa-angle-down collapse-indicator"></i>
                         </h4>
-                    </div>
-                    <div id="invoice" class="panel-collapse collapsed in">
+                    </summary>
+                    <div id="invoice">
                         <div class="panel-body">
                             {% bootstrap_form invoice_form layout="horizontal" %}
                         </div>
                     </div>
-                </div>
+                </details>
             {% endif %}
             {% for pos, forms in formgroups %}
-                <div class="panel panel-default">
-                    <div class="panel-heading">
+                <details class="panel panel-default" open>
+                    <summary class="panel-heading">
                         <h4 class="panel-title">
-                            <a data-toggle="collapse" href="#cp{{ pos.id }}">
-                                <strong>{{ pos.item.name }}{% if pos.variation %}
-                                    – {{ pos.variation }}
-                                {% endif %}</strong>
-                                <i class="fa fa-angle-down collapse-indicator"></i>
-                            </a>
+                            <strong>{{ pos.item.name }}{% if pos.variation %}
+                                – {{ pos.variation }}
+                            {% endif %}</strong>
+                            <i class="fa fa-angle-down collapse-indicator"></i>
                         </h4>
-                    </div>
-                    <div id="cp{{ pos.id }}"
-                            class="panel-collapse collapsed in">
+                    </summary>
+                    <div id="cp{{ pos.id }}">
                         <div class="panel-body">
                             {% for form in forms %}
                                 {% if form.pos.item != pos.item %}
@@ -61,7 +56,7 @@
                             {% endfor %}
                         </div>
                     </div>
-                </div>
+                </details>
             {% endfor %}
         </div>
         <div class="form-group submit-group">
diff --git a/src/pretix/control/templates/pretixcontrol/orders/export.html b/src/pretix/control/templates/pretixcontrol/orders/export.html
index 00d957d43d..c019988f7a 100644
--- a/src/pretix/control/templates/pretixcontrol/orders/export.html
+++ b/src/pretix/control/templates/pretixcontrol/orders/export.html
@@ -11,17 +11,14 @@
         {% endif %}
     </h1>
     {% for e in exporters %}
-        <div class="panel panel-default">
-            <div class="panel-heading">
+        <details class="panel panel-default" {% if "identifier" in request.GET %}open{% endif %}>
+            <summary class="panel-heading">
                 <h3 class="panel-title">
-                    <a class="collapsed" data-toggle="collapse" href="#{{ e.identifier }}">
-                        {{ e.verbose_name }}
-                        <i class="fa fa-angle-down collapse-indicator"></i>
-                    </a>
+                    {{ e.verbose_name }}
+                    <i class="fa fa-angle-down collapse-indicator"></i>
                 </h3>
-            </div>
-            <div id="{{ e.identifier }}" class="panel-collapse collapse {% if "identifier" in request.GET %}in
-{% endif %}">
+            </summary>
+            <div id="{{ e.identifier }}">
                 <div class="panel-body">
                     <form action="{% url "control:event.orders.export.do" event=request.event.slug organizer=request.organizer.slug %}"
                             method="post" class="form-horizontal" data-asynctask data-asynctask-download
@@ -35,6 +32,6 @@
                     </form>
                 </div>
             </div>
-        </div>
+        </details>
     {% endfor %}
 {% endblock %}
diff --git a/src/pretix/presale/templates/pretixpresale/base.html b/src/pretix/presale/templates/pretixpresale/base.html
index 3b66226719..149f77ff59 100644
--- a/src/pretix/presale/templates/pretixpresale/base.html
+++ b/src/pretix/presale/templates/pretixpresale/base.html
@@ -25,9 +25,9 @@
         <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 "pretixbase/js/details.js" %}"></script>
         <script type="text/javascript" src="{% static "pretixpresale/js/ui/cart.js" %}"></script>
         <script type="text/javascript" src="{% static "lightbox/js/lightbox.min.js" %}"></script>
     {% endcompress %}
@@ -37,7 +37,7 @@
     <link rel="icon" href="{% static "pretixbase/img/favicon.ico" %}">
     {% block custom_header %}{% endblock %}
 </head>
-<body data-locale="{{ request.LANGUAGE_CODE }}" data-now="{% now "U.u" %}" data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}" data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}">
+<body class="nojs" data-locale="{{ request.LANGUAGE_CODE }}" data-now="{% now "U.u" %}" data-datetimeformat="{{ js_datetime_format }}" data-timeformat="{{ js_time_format }}" data-dateformat="{{ js_date_format }}" data-datetimelocale="{{ js_locale }}">
 {% block above %}
 {% endblock %}
 <div class="container">
diff --git a/src/pretix/presale/templates/pretixpresale/event/checkout_addons.html b/src/pretix/presale/templates/pretixpresale/event/checkout_addons.html
index c2ca6c03d1..17d3c28a7e 100644
--- a/src/pretix/presale/templates/pretixpresale/event/checkout_addons.html
+++ b/src/pretix/presale/templates/pretixpresale/event/checkout_addons.html
@@ -9,19 +9,16 @@
         {% csrf_token %}
         <div class="panel-group" id="questions_group">
             {% for form in forms %}
-                <div class="panel panel-default">
-                    <div class="panel-heading">
+                <details class="panel panel-default">
+                    <summary class="panel-heading">
                         <h4 class="panel-title">
-                            <a data-toggle="collapse" href="#cp{{ form.cartpos.pk }}">
-                                <strong>{{ form.item.name }}{% if form.variation %}
-                                    – {{ form.variation }}
-                                {% endif %}</strong>
-                                <i class="fa fa-angle-down collapse-indicator"></i>
-                            </a>
+                            <strong>{{ form.item.name }}{% if form.variation %}
+                                – {{ form.variation }}
+                            {% endif %}</strong>
+                            <i class="fa fa-angle-down collapse-indicator"></i>
                         </h4>
-                    </div>
-                    <div id="cp{{ form.cartpos.pk }}"
-                            class="panel-collapse collapsed in">
+                    </summary>
+                    <div id="cp{{ form.cartpos.pk }}">
                         <div class="panel-body">
                             {% for c in form.categories %}
                                 <fieldset>
@@ -55,7 +52,7 @@
                             {% endfor %}
                         </div>
                     </div>
-                </div>
+                </details>
             {% endfor %}
         </div>
         <div class="row checkout-button-row">
diff --git a/src/pretix/presale/templates/pretixpresale/event/checkout_base.html b/src/pretix/presale/templates/pretixpresale/event/checkout_base.html
index 1420da0fb8..70cdb36639 100644
--- a/src/pretix/presale/templates/pretixpresale/event/checkout_base.html
+++ b/src/pretix/presale/templates/pretixpresale/event/checkout_base.html
@@ -3,28 +3,26 @@
 {% load bootstrap3 %}
 {% block title %}{% trans "Checkout" %}{% endblock %}
 {% block content %}
-    <div class="panel panel-default cart">
-        <div class="panel-heading">
+    <details class="panel panel-default cart">
+        <summary class="panel-heading">
             <h3 class="panel-title">
-                <a class="collapsed" data-toggle="collapse" href="#cart">
-                    <span>
-                        <i class="fa fa-shopping-cart"></i>
-                        <strong>{% trans "Your cart" %}</strong>
-                    </span>
-                    <span>
-                        <strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
-                            {% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
-                                {{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
-                            {% else %}
-                                {% trans "Cart expired" %}
-                            {% endif %}
-                        </strong>
-                        <i class="fa fa-angle-down collapse-indicator"></i>
-                    </span>
-                </a>
+                <span>
+                    <i class="fa fa-shopping-cart"></i>
+                    <strong>{% trans "Your cart" %}</strong>
+                </span>
+                <span>
+                    <strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
+                        {% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
+                            {{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
+                        {% else %}
+                            {% trans "Cart expired" %}
+                        {% endif %}
+                    </strong>
+                    <i class="fa fa-angle-down collapse-indicator"></i>
+                </span>
             </h3>
-        </div>
-        <div class="panel-collapse collapse" id="cart">
+        </summary>
+        <div>
             <div class="panel-body">
                 {% include "pretixpresale/event/fragment_cart.html" with cart=cart event=request.event %}
                 <em id="cart-deadline" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
@@ -38,7 +36,7 @@
                 </em>
             </div>
         </div>
-    </div>
+    </details>
     <h2>{% trans "Checkout" %}</h2>
     {% include "pretixpresale/event/fragment_checkoutflow.html" %}
     {% block inner %}
diff --git a/src/pretix/presale/templates/pretixpresale/event/checkout_questions.html b/src/pretix/presale/templates/pretixpresale/event/checkout_questions.html
index c9f77d31df..f9f123647e 100644
--- a/src/pretix/presale/templates/pretixpresale/event/checkout_questions.html
+++ b/src/pretix/presale/templates/pretixpresale/event/checkout_questions.html
@@ -11,64 +11,57 @@
     <form class="form-horizontal" method="post" enctype="multipart/form-data">
         {% csrf_token %}
         <div class="panel-group" id="questions_group">
-            <div class="panel panel-default">
-                <div class="panel-heading">
+            <details class="panel panel-default" open>
+                <summary class="panel-heading">
                     <h4 class="panel-title">
-                        <a data-toggle="collapse" href="#contact">
-                            <strong>{% trans "Contact information" %}</strong>
-                            <i class="fa fa-angle-down collapse-indicator"></i>
-                        </a>
+                        <strong>{% trans "Contact information" %}</strong>
+                        <i class="fa fa-angle-down collapse-indicator"></i>
                     </h4>
-                </div>
-                <div id="contact" class="panel-collapse collapse in">
+                </summary>
+                <div id="contact">
                     <div class="panel-body">
                         {% bootstrap_form contact_form layout="horizontal" %}
                     </div>
                 </div>
-            </div>
+            </details>
             {% if event.settings.invoice_address_asked %}
-                <div class="panel panel-default">
-                    <div class="panel-heading">
+                <details class="panel panel-default" {% if event.settings.invoice_address_required or event.settings.invoice_name_required %}open{% endif %}>
+                    <summary class="panel-heading">
                         <h4 class="panel-title">
-                            <a class="{% if not event.settings.invoice_address_required and not event.settings.invoice_name_required %} collapsed{% endif %}" data-toggle="collapse" href="#invoice">
-                                <strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required and not event.settings.invoice_name_required %}
-                                    {% trans "(optional)" %}
-                                {% endif %}</strong>
-                                
-                                <i class="fa fa-angle-down collapse-indicator"></i>
-                            </a>
+                            <strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required and not event.settings.invoice_name_required %}
+                                {% trans "(optional)" %}
+                            {% endif %}</strong>
+
+                            <i class="fa fa-angle-down collapse-indicator"></i>
                         </h4>
-                    </div>
-                    <div id="invoice" class="panel-collapse collapse {% if event.settings.invoice_address_required or event.settings.invoice_name_required or "invoice" in request.GET %} in{% endif %}">
+                    </summary>
+                    <div id="invoice">
                         <div class="panel-body">
                             {% bootstrap_form invoice_form layout="horizontal" %}
                         </div>
                     </div>
-                </div>
+                </details>
             {% endif %}
 
             {% for pos, forms in formgroups %}
-                <div class="panel panel-default">
-                    <div class="panel-heading">
+                <details class="panel panel-default" open>
+                    <summary class="panel-heading">
                         <h4 class="panel-title">
-                            <a data-toggle="collapse" href="#cp{{ pos.id }}">
-                                <strong>{{ pos.item.name }}</strong>
-                                {% if pos.variation %}
-                                    – {{ pos.variation }}
-                                {% endif %}
-                                {% if forloop.counter > 1 %}
-                                    <span class="text-right">
-                                        <input type="button" data-id="{{ forloop.counter0 }}" name="copy" class="js-copy-answers btn btn-default btn-xs" value='{% trans "Copy answers from above" %}'>
-                                        <i class="fa fa-angle-down collapse-indicator"></i>
-                                    </span>
-                                {% else %}
+                            <strong>{{ pos.item.name }}</strong>
+                            {% if pos.variation %}
+                                – {{ pos.variation }}
+                            {% endif %}
+                            {% if forloop.counter > 1 %}
+                                <span class="text-right">
+                                    <input type="button" data-id="{{ forloop.counter0 }}" name="copy" class="js-copy-answers btn btn-default btn-xs" value='{% trans "Copy answers from above" %}'>
                                     <i class="fa fa-angle-down collapse-indicator"></i>
-                                {% endif %}
-                            </a>
+                                </span>
+                            {% else %}
+                                <i class="fa fa-angle-down collapse-indicator"></i>
+                            {% endif %}
                         </h4>
-                    </div>
-                    <div id="cp{{ pos.id }}"
-                            class="panel-collapse collapse in">
+                    </summary>
+                    <div>
                         <div class="panel-body" data-idx="{{ forloop.counter0 }}">
                             {% if pos.addons.all %}
                                 <div class="form-group">
@@ -93,7 +86,7 @@
                             {% endfor %}
                         </div>
                     </div>
-                </div>
+                </details>
             {% endfor %}
         </div>
         <div class="row checkout-button-row">
diff --git a/src/pretix/presale/templates/pretixpresale/event/index.html b/src/pretix/presale/templates/pretixpresale/event/index.html
index dd8a3f2b6b..08f16dda75 100644
--- a/src/pretix/presale/templates/pretixpresale/event/index.html
+++ b/src/pretix/presale/templates/pretixpresale/event/index.html
@@ -16,28 +16,26 @@
         </script>
     {% endautoescape %}
     {% if show_cart %}
-        <div class="panel panel-primary cart">
-            <div class="panel-heading">
+        <details class="panel panel-primary cart" open>
+            <summary class="panel-heading">
                 <h3 class="panel-title">
-                    <a class="collapsed" data-toggle="collapse" href="#cart">
-                        <span>
-                            <i class="fa fa-shopping-cart"></i>
-                            <strong>{% trans "Your cart" %}</strong>
-                        </span>
-                        <span>
-                            <strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
-                                {% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
-                                    {{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
-                                {% else %}
-                                    {% trans "Cart expired" %}
-                                {% endif %}
-                            </strong>
-                            <i class="fa fa-angle-down collapse-indicator"></i>
-                        </span>
-                    </a>
+                    <span>
+                        <i class="fa fa-shopping-cart"></i>
+                        <strong>{% trans "Your cart" %}</strong>
+                    </span>
+                    <span>
+                        <strong id="cart-deadline-short" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
+                            {% if cart.minutes_left > 0 or cart.seconds_left > 0 %}
+                                {{ cart.minutes_left|stringformat:"02d" }}:{{ cart.seconds_left|stringformat:"02d" }}
+                            {% else %}
+                                {% trans "Cart expired" %}
+                            {% endif %}
+                        </strong>
+                        <i class="fa fa-angle-down collapse-indicator"></i>
+                    </span>
                 </h3>
-            </div>
-            <div class="panel-collapse collapse in" id="cart">
+            </summary>
+            <div>
                 <div class="panel-body">
                     {% include "pretixpresale/event/fragment_cart.html" with cart=cart event=request.event editable=True %}
                     <em id="cart-deadline" data-expires="{{ cart.first_expiry|date:"Y-m-d H:i:sO" }}">
@@ -79,7 +77,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </details>
     {% endif %}
 
     {% if show_dates %}
diff --git a/src/pretix/presale/templates/pretixpresale/event/order_modify.html b/src/pretix/presale/templates/pretixpresale/event/order_modify.html
index c7cfed39d8..ec38b7e848 100644
--- a/src/pretix/presale/templates/pretixpresale/event/order_modify.html
+++ b/src/pretix/presale/templates/pretixpresale/event/order_modify.html
@@ -18,38 +18,33 @@
                         Please contact us if you need a new invoice.
                     {% endblocktrans %}
                 </div>
-                <div class="panel panel-default">
-                    <div class="panel-heading">
+                <details class="panel panel-default" open>
+                    <summary class="panel-heading">
                         <h4 class="panel-title">
-                            <a data-toggle="collapse" href="#invoice" data-parent="#questions_accordion">
-                                <strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required %}
-                                    {% trans "(optional)" %}
-                                {% endif %}</strong>
-                                <i class="fa fa-angle-down collapse-indicator"></i>
-                            </a>
+                            <strong>{% trans "Invoice information" %}{% if not event.settings.invoice_address_required %}
+                                {% trans "(optional)" %}
+                            {% endif %}</strong>
+                            <i class="fa fa-angle-down collapse-indicator"></i>
                         </h4>
-                    </div>
-                    <div id="invoice" class="panel-collapse collapsed in">
+                    </summary>
+                    <div id="invoice" class="panel-collapse">
                         <div class="panel-body">
                             {% bootstrap_form invoice_form layout="horizontal" %}
                         </div>
                     </div>
-                </div>
+                </details>
             {% endif %}
             {% for pos, forms in formgroups %}
-                <div class="panel panel-default">
-                    <div class="panel-heading">
+                <details class="panel panel-default" open>
+                    <summary class="panel-heading">
                         <h4 class="panel-title">
-                            <a data-toggle="collapse" href="#cp{{ pos.id }}">
-                                <strong>{{ pos.item.name }}{% if pos.variation %}
-                                    – {{ pos.variation }}
-                                {% endif %}</strong>
-                                <i class="fa fa-angle-down collapse-indicator"></i>
-                            </a>
+                            <strong>{{ pos.item.name }}{% if pos.variation %}
+                                – {{ pos.variation }}
+                            {% endif %}</strong>
+                            <i class="fa fa-angle-down collapse-indicator"></i>
                         </h4>
-                    </div>
-                    <div id="cp{{ pos.id }}"
-                            class="panel-collapse collapsed in">
+                    </summary>
+                    <div id="cp{{ pos.id }}">
                         <div class="panel-body">
                             {% for form in forms %}
                                 {% if form.pos.item != pos.item %}
@@ -60,7 +55,7 @@
                             {% endfor %}
                         </div>
                     </div>
-                </div>
+                </details>
             {% endfor %}
         </div>
         <div class="row checkout-button-row">
diff --git a/src/pretix/static/pretixpresale/js/ui/details.js b/src/pretix/static/pretixbase/js/details.js
similarity index 91%
rename from src/pretix/static/pretixpresale/js/ui/details.js
rename to src/pretix/static/pretixbase/js/details.js
index 357e86a373..41f9b40dbb 100644
--- a/src/pretix/static/pretixpresale/js/ui/details.js
+++ b/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',
diff --git a/src/pretix/static/pretixcontrol/js/ui/main.js b/src/pretix/static/pretixcontrol/js/ui/main.js
index f0b01924d7..3e60756588 100644
--- a/src/pretix/static/pretixcontrol/js/ui/main.js
+++ b/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,
diff --git a/src/pretix/static/pretixcontrol/scss/main.scss b/src/pretix/static/pretixcontrol/scss/main.scss
index 3f53ee5616..d040336468 100644
--- a/src/pretix/static/pretixcontrol/scss/main.scss
+++ b/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);
+}
+
diff --git a/src/pretix/static/pretixpresale/js/ui/main.js b/src/pretix/static/pretixpresale/js/ui/main.js
index 4647011c3b..fa7f510c87 100644
--- a/src/pretix/static/pretixpresale/js/ui/main.js
+++ b/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');
diff --git a/src/pretix/static/pretixpresale/scss/_event.scss b/src/pretix/static/pretixpresale/scss/_event.scss
index 4db96f55a1..d47c222205 100644
--- a/src/pretix/static/pretixpresale/scss/_event.scss
+++ b/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;
diff --git a/src/pretix/static/pretixpresale/scss/main.scss b/src/pretix/static/pretixpresale/scss/main.scss
index 0c486f246c..1891233bb9 100644
--- a/src/pretix/static/pretixpresale/scss/main.scss
+++ b/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";
