Raul,

The built-in field rules to show/hide fields will allow required fields to be ignored as long as you have back end validation disabled.

As a result, I think the best way to accomplish your goal would be to do the following:

1. Create an Always Hidden "trigger" field for each Section (you might want it set to save these values if this is a multi-step process).
2. Add a JavaScript event to the "collapse/expand" button (not actually a button element) that will change the value of the "trigger" field based on whether or not it has the "collapsed" class.
3. Apply a Field Rule that will Hide the desired fields based on the value of the "trigger" field

I tested this out and it worked as expected. I added a custom CSS class to the target section and the associated trigger field:

• Trigger -> Trigger1
• Section -> Section1

Then added the following JavaScript code

$(document).ready(function(){
  $('.Section1 .collapsible').click(
    function(){
      if($(this).hasClass('collapsed')){
        $('.Trigger1 input').val('SHOW').change();
      }
      else{
        setTimeout(function(){
          $('.Trigger1 input').val('HIDE').change();
        },250);
      }
    }
  );
});

The Field Rule is set to Hide Field1 and Field2 and ignore the values when Trigger1 = "HIDE"

Hiding the fields as soon as the collapse button is clicked made the collapse animation a bit jerky, so I wrapped that part of the code in a setTimeout to allow the collapse animation to finish before actually hiding the fields.