Victor Font replied 8 months ago

That being said, the repeater field is collapsible in the form editor, but not on the front end with good reason. Formidable is masterful at back end functionality. Do things go wrong occasionally, yeah, but it's a great application building tool nevertheless. There's no end to the type of applications that can be be constructed through the WordPress/Formidable Forms marriage.

In preparing this response, I compared a repeater's HTML back end source with the front end source as rendered in the browser by Formidable and shown in the FireFox inspection tool. Inspection tools allow developers to edit the HTML on the front end in real time for testing quality.

To capture the HTML for comparison, I edited the collapsible section on the back end. The element that begins this area is <ul class="frm_grid_container frm_sorting ui-droppable">. There are 4,233 lines of code in the HTML page to support the collapsible header on the back end.

On the front end, the code generated to display the repeater begins with <div id="frm_field_1469_container" class="frm_form_field frm_section_heading form-field "> and has just 129 lines of code for the entire thing that includes 2 rows. That's a significant difference, but I understand why it's that way.

The back end fields are designed to work in the editor only and function as self-contained units. Kind of like a block, but not really. I don't know why Strategy 11 hasn't added collapsiblity to the Repeater field, especially since it already works for Sections. Perhaps, someone needs to open a feature request ticket through their support account.

Formidable provides developers with several ways for inserting their own generated code into the front. You can add/modify HTML on the form's Customize HTML page in the form's settings. The source code from which a repeater is generated on the front end is simplistic:

<div id="frm_field_[id]_container" class="frm_form_field frm_section_heading form-field[error_class]">
<h3 class="frm_pos_[label_position][collapse_class]">[field_name]</h3>
[if description]<div class="frm_description">[description]</div>[/if description]
[collapse_this]
</div>

I suggest that you wrap the [collapse_this] shortcode in your own div that you control with jQuery hide/show. This will leave the header displayed, but hide the rows.

Bobby Singh replied 8 months ago

Thanks for the response Victor. I would have no idea how to do that. I found the source code for the repeater field. But thats as far as I can get. Not sure what to do beyond that point.

Victor Font replied 8 months ago

https://www.w3schools.com/jquery/jquery_hide_show.asp