Form Block: Accordion Dropdown

This is paid code. You need to pay me to use code & get priority support & free install

Note: Use Line Field, fields under Line field will appear inside Accordion Dropdown

Code 1: Close all on initial 

Footer Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
window.addEventListener("load", (event) => {
  $('.form-item.line-field.underline').each(function() {
    $(this).nextUntil('.underline').hide();
  });
  $('.form-item.line-field.underline').on('click', function() {
    var $this = $(this);
    var $items = $this.nextUntil('.underline');
    
    $items.stop(true, true).slideToggle(300);
    $this.toggleClass('collapsed');
  });
});
</script>
<style>
.form-item.line-field.underline {
  cursor: pointer;
  user-select: none;
}
  .form-item.line-field.underline .title {
  	font-weight: bold;
  }
.form-item.line-field.underline .title:after {
  content: "\e009";
  font-family: 'squarespace-ui-font';
  float: right;
  transition: transform 0.3s ease;
}

.form-item.line-field.underline.collapsed .title:after {
  transform: rotate(180deg);
}
</style>

Code 2: Expand first accordion dropdown

Footer Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
window.addEventListener("load", (event) => {
  $('.form-item.line-field.underline').each(function() {
    $(this).nextUntil('.underline').hide();
  });
  
  $('.form-item.line-field.underline').first().nextUntil('.underline').show();
  $('.form-item.line-field.underline').first().addClass('collapsed');
  
  $('.form-item.line-field.underline').on('click', function() {
    var $this = $(this);
    var $items = $this.nextUntil('.underline');
    
    $items.stop(true, true).slideToggle(300);
    $this.toggleClass('collapsed');
  });
});
</script>
<style>
.form-item.line-field.underline {
  cursor: pointer;
  user-select: none;
}
.form-item.line-field.underline .title {
  font-weight: bold;
}
.form-item.line-field.underline .title:after {
  content: "\e009";
  font-family: 'squarespace-ui-font';
  float: right;
  transition: transform 0.3s ease;
}
.form-item.line-field.underline.collapsed .title:after {
  transform: rotate(180deg);
}
</style>