Display repeater field as accordion in Formidable forms

by Sujeevan | Apr 27, 2020 | Formidable

One of the powerful features of Formidable forms is repeated fields which allow repeating a set of fields in a Form. Formidable allows customizing how repeated records are displayed using the “Repeat layout” setting.

• No auto-formatting: In this layout, each repeated record displayed in their original format.
• Inline: In this layout, All fields in a repeated record is displayed in a row.
• Grid: In this layout, repeated records are displayed in a table where fields’ labels become table header.

While these layouts are useful in various scenarios, one of the issues with these layouts is all repeated records are visible at all times. This will be a problem if the repeater has a lot of fields inside or the user has to add many repeated records. When that happens, the form will become very big and the user will have a hard time focusing on it.

We are going to address this issue in this post by adding the accordion effect to repeated records.

Step 1: Load jQuery UI library. The following code can be added to functions.php or Code Snippets plugin can be used.

wp_enqueue_script('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js', array('jquery'));
wp_enqueue_style('jquery-ui-css', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css');

Step 2: Create the form with the repeater field and other fields the usual way.

Step 3: The next step is to make sure the repeated field and the Add & Remove buttons are displayed in the same line. Click on the repeater field and add “frm10” class to “CSS Layout classes” field setting. Click on the Add/Remove button of the repeater field and add “frm_sixth” class to “CSS Layout classes” field setting. Please note that this step needs adjustment based on your theme and page layout. You can also completely skip this and write your own CSS to do the alignment.

Step 4: Go to Settings –> “Customize HTML” in the form and edit it as per the followings instructions.

a) Identify the first field inside the repeater and add the following HTML at the beginning of it.

<div class="accordion">
  <h3><span class="accordion-title-text">Section 1</span></h3>
  <div>

b) Identify the last field inside the repeater and add the following HTML at the end of it.

  </div>
</div>

Basically what we did here is wrapping the repeater section with HTML required by accordion.

Step 5: Copy following Javascript to the “After fields” section.

<script type="text/javascript">
jQuery(document).ready(function($) {
	$(document).on("accordioncreate", '.accordion', function(event, ui) {
		setAccordionTitles();
		$('.accordion').not(this).accordion('option', {active: false});
	});
	
	createAccordion();
	$(document).on('frmAfterAddRow', createAccordion);
	$(document).on('frmAfterRemoveRow', setAccordionTitles);

	function createAccordion() {
		$( ".accordion:not(.ui-accordion)" ).accordion({
			collapsible: true, active: 0, heightStyle: "content",
			beforeActivate: function( event, ui ) {
				if(!ui.oldPanel.length) {
					$('.accordion').not(this).accordion('option', {active: false});
				}
			}
		});
	}

	function setAccordionTitles() {
		$("h3.ui-accordion-header .accordion-title-text").each(function (index, value) { 
			$(this).text("Member " + (index + 1) + " - " +  $("#field_5gn8v-" + index).val()); //Replace 5gn8v with the ID of the field to display it's value as part of title
		});
	}
});
</script>

If you read the above Javascript, you will know a little secret. What we are creating is not a single accordion with multiple sections. Instead, each repeater record is an accordion with a single section. If you have 10 rows in your repeater, there will be 10 independent accordions each with one section. I chose this approach because I couldn’t find a way to integrate single accordion with Formidable HTML. The above Javascript does the magic of turning all of the accordions behaving like a single accordion.

In line 25, the title of the accordion section is set. If you want a different name for the title, replace the text “Member ” with your text.

Step 6: Add necessary CSS in “Formidable” –> “Styles” –> “Custom CSS” to make the layout fit your website. The styles vary depends on your theme and other settings. The following styles are used in the example below.

.frm_repeat_buttons {
	float:right !important;	
}

.ui-accordion {
	float: left !important;
	width: 80%;
}

.ui-accordion-header {
	padding: 6px 0 !important;
	background: #F9E79F !important;
	border-color: #F9E79F !important;
}

.ui-accordion-header.ui-state-active {
	background: #F1C40F !important;
}

Demo

The following is an example form. Play with it by adding a few more repeater records and then try to expand records one after another to see the accordion effect.