New accordion panels using <fieldset>

src/pretix/static/bootstrap/scss/bootstrap/_theme.scss

@@ -275,12 +275,12 @@
 }
 
 // Apply the mixin to the panel headings only
-.panel-default > .panel-heading   { @include panel-heading-styles($panel-default-heading-bg); }
-.panel-primary > .panel-heading   { @include panel-heading-styles($panel-primary-heading-bg); }
-.panel-success > .panel-heading   { @include panel-heading-styles($panel-success-heading-bg); }
-.panel-info > .panel-heading      { @include panel-heading-styles($panel-info-heading-bg); }
-.panel-warning > .panel-heading   { @include panel-heading-styles($panel-warning-heading-bg); }
-.panel-danger > .panel-heading    { @include panel-heading-styles($panel-danger-heading-bg); }
+.panel-default > .panel-heading, .panel-default > legend > .panel-heading   { @include panel-heading-styles($panel-default-heading-bg); }
+.panel-primary > .panel-heading, .panel-primary > legend > .panel-heading   { @include panel-heading-styles($panel-primary-heading-bg); }
+.panel-success > .panel-heading, .panel-success > legend > .panel-heading   { @include panel-heading-styles($panel-success-heading-bg); }
+.panel-info > .panel-heading, .panel-info > legend > .panel-heading      { @include panel-heading-styles($panel-info-heading-bg); }
+.panel-warning > .panel-heading, .panel-warning > legend > .panel-heading   { @include panel-heading-styles($panel-warning-heading-bg); }
+.panel-danger > .panel-heading, .panel-danger > legend > .panel-heading    { @include panel-heading-styles($panel-danger-heading-bg); }
 
 
 //

src/pretix/static/bootstrap/scss/bootstrap/mixins/_panels.scss

@@ -3,7 +3,7 @@
 @mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
   border-color: $border;
 
-  & > .panel-heading {
+  & > .panel-heading, & > legend > .panel-heading {
     color: $heading-text-color;
     background-color: $heading-bg-color;
     border-color: $heading-border;

src/pretix/static/pretixcontrol/scss/_forms.scss

@@ -543,7 +543,7 @@ table td > .checkbox input[type="checkbox"] {
   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: 12px 15px;
@@ -555,6 +555,12 @@ table td > .checkbox input[type="checkbox"] {
     top: 2px;
   }
 }
+fieldset.accordion-panel > legend {
+  display: contents;
+}
+fieldset.accordion-panel[disabled] > .panel-body {
+  display: none;
+}
 .maildesignpreview {
   label {
     display: block;

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;