New accordion panels using <fieldset> (#4681)

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

@@ -243,6 +243,11 @@ function setup_basics(el) {
             $($(this).attr("data-target")).collapse('show');
         }
     });
+    $("fieldset.accordion-panel > legend input[type=radio]").change(function() {
+        $(this).closest("fieldset").siblings("fieldset").prop('disabled', true);
+        $(this).closest("fieldset").prop('disabled', false);
+    }).each(function() { $(this).closest("fieldset").prop('disabled', true); }).filter(":checked").trigger('change');
+
     el.find(".js-only").removeClass("js-only");
     el.find(".js-hidden").hide();
 

src/pretix/static/pretixpresale/scss/_forms.scss

@@ -134,7 +134,7 @@ a.btn, button.btn {
   display: block;
   margin: 0;
 }
-.panel-default>.accordion-radio>.panel-heading {
+.panel-default>.accordion-radio>.panel-heading, fieldset.accordion-panel>legend>.panel-heading {
   color: #333;
   background-color: #f5f5f5;
   padding: 8px 15px;
@@ -147,6 +147,12 @@ a.btn, button.btn {
 .panel-default>.accordion-radio+.panel-collapse>.panel-body {
   border-top: 1px solid #ddd;
 }
+fieldset.accordion-panel > legend {
+  display: contents;
+}
+fieldset.accordion-panel[disabled] > .panel-body {
+  display: none;
+}
 
 .nav-tabs {
   border-bottom: 0px solid #ddd;