Adding an accordion inside a form

Get Help
1

Is it possible to add an accordion with a form component?

2

Yes this is possible if your form has either a multi select or radio field.

You’ll need to add a snippet of CSS and Javascript on your screen, this will change the style of the fields to make them look like accordions.

Note - this will be applied to any multi select or radio fields on your screen.

Paste this into the screen CSS:

.checkbox {
  padding: 2px 0;
}
.checkbox.checkbox-icon input[type="checkbox"] + label {
  padding-bottom: 2px;
  padding-top: 2px;
  display: block;
}

.radio + .radio, .checkbox + .checkbox {
  margin-top: -10px;
}

[_type="flCheckbox"] .control-label {
  display: block;
  position: relative;
  cursor: pointer;
}
[_type="flCheckbox"] .control-label:after {
  content: "\f077";
  position: absolute;
  font-family: FontAwesome;
  right: 3px;
  bottom: 3px;
}
[_type="flCheckbox"] .control-label.active:after {
  content: "\f078";
}
//Radio
.checkbox {
  padding: 2px 0;
}
.radio.radio-icon input[type="radio"] + label {
  padding-bottom: 2px;
  padding-top: 2px;
  display: block;
}
.radio.radio-icon input[type="radio"]:checked + label {
  background-color: #0066b2;
  border-radius: 50px;
  color: white;
}
.radio + .radio, .checkbox + .checkbox {
  margin-top: -10px;
}
.radio.radio-icon input[type="radio"] + label > span.check {
  display: none;
}
[_type="flRadio"] .control-label {
  display: block;
  position: relative;
  cursor: pointer;
}
[_type="flRadio"] .control-label:after {
  content: "\f077";
  position: absolute;
  font-family: FontAwesome;
  right: 3px;
  bottom: 3px;
}
[_type="flRadio"] .control-label.active:after {
  content: "\f078";
}
/*.row*/
[data-widget-package="com.fliplet.form-builder"] .form-group label.control-label {
  border-bottom: 1px solid black;
  line-height: 1.8;
}

And paste this in the screen JS:

$(document).on('click', '[_type="flCheckbox"] .control-label', function () {
  $(this).toggleClass('active').parent().next().toggle(200);
});

function toggleField(fieldName, show) {
  var $label = $('[data-field="' + fieldName + '"] .control-label');
  var isExpanded = !$label.hasClass('active');

  if (typeof show === 'undefined') {
    isExpanded = !isExpanded;
  } else {
    isExpanded = !!show;
  }

  $('[data-field="' + fieldName + '"] .control-label')
    [isExpanded ? 'removeClass' : 'addClass']('active')
    .parent()
    .next()
    [isExpanded ? 'show' : 'hide'](200);
}

function collapseFilters() {
  return Fliplet.FormBuilder.get().then(function(form) {
    _.forEach(form.fields.get(), function(field) {
      toggleField(field.name, false);
    });
  });
}
collapseFilters()
1 Like