Collapsible Gravity Form Sections

gform-sections-accordion.js

/*
This JS creates collapsible Gravity Form sections breaks

IMPORTANT:

1 - Within the Gravity form, you must add the class collapsible to each section break.

2 - All fields within those section breaks must have the class collapsible_field

3 - You must include both the CSS and the JS


Original code by: https://mircian.com/2016/11/06/transform-gravity-forms-sections-accordion/
Improved by: https://jsfiddle.net/snvvw2px/1/
Further improvement by me!
*/

jQuery( document ).ready(function() {
    var $ = jQuery();
    var section = [];
    
    var new_div;
    // go through all the Gravity Forms fields
    jQuery('.gfield').each( function() {
        // if the field is a section create a new array for fields and a new container to append the fields
        if ( jQuery(this).hasClass('gsection collapsible') ) {
            if ( section.length > 0 ) {
                section = [];
            }
            new_div = jQuery('<div class="m_section"></div>');
            new_div.insertAfter(jQuery(this));
        } else {
            // check if the field is the the kind you want to use for the accordion 
            if ( jQuery(this).hasClass('collapsible_field') ) {
                // if it's the first element add a custom text to the section name 
                if ( section.length == 0 ) {
                    jQuery(this).prevAll(".gsection:first").find('.gsection_title').append(' <span class="m_expand"><span class="m_expand_text"><i class="fa fa-chevron-down"></i></span><span class="m_collapse_text"><i class="fa fa-chevron-up"></i></span></span>');
                }
                // add the field to the section array for reference
                section.push(jQuery(this));
                // move the field in the container for the section 
                if ( new_div ) {
                    new_div.append(jQuery(this));
                }
            }
        }
    });

    // add the section click behavior
    jQuery('.gsection.collapsible').click(function(e) {
        e.preventDefault();

        console.log('hit me!');

        if ( jQuery(this).next().is(':visible') ) {
            jQuery('.gsection').removeClass('show_collapse');
            // hide all sections
            jQuery('.m_section').hide("fast");
    //Otherwise, hide any visible content areas and display the clicked section
    } else {
            // toggle the text
            jQuery('.gsection').removeClass('show_collapse');
            // hide all sections
            jQuery('.m_section').hide("fast");
                
            // show the content in the .m_section
            jQuery(this).next().show("fast");
            // toggle the text
            jQuery(this).addClass('show_collapse');
	    
	    			
	    // Scroll to the section
	    var target = jQuery(this);
	    jQuery('html, body').animate({ scrollTop: target.offset().top}, 500);
        }

    });

    // hide all section containers on first run, can be replaced by a css rule
    jQuery('.m_section').hide();
});

// On the form submit, expand collapsed sections if there is a Gravity validation error message displayed.
jQuery(document).on('gform_post_render', function(){
	jQuery('.m_section').each(function(i) {
		// For pre Gravity Forms 2.5, use 'validation_message'
		if (jQuery(this).children().find('.gfield_validation_message').length !== 0) {
			jQuery(this).show("fast");
			jQuery(this).prev().addClass('show_collapse');
		}
	});
});

style.css

.m_collapse_text, .show_collapse .m_expand_text, .m_section{
	display: none; 
}
.show_collapse .m_collapse_text {
	display: inline; 
}

.m_section {
    grid-column: 1/-1;
}

span.m_expand span i {
	font-size: 16px;
	line-height: 24px;
	vertical-align: top;
	margin-left: 10px;
}

i.fa.fa-chevron-down:before {
    content: "+";
}
i.fa.fa-chevron-up:before {
    content: "-";
}

when we use ajax on the form submission, that m_section is getting removed. do we have any solution for this?

Hi, is this code still valid?

I tried it but it doesn't seem to work even in the test link https://test.ingeni.net/

TY

Hi, is this code still valid?

I tried it but it doesn't seem to work even in the test link https://test.ingeni.net/

TY

Hi. My apologies - I updated the theme file and it wiped out the enqueuing of the js and css files. It's working now. :)