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: "-";
}

Hi Bruce,
Thank you very much for providing this code, it saved me so much time on a rather lengthy form, and as it was for a charity I needed to keep costs down so no paid for plugins.

I do have one query though is it possible to scroll the user to the top of the section when it is opened, I'm finding at the moment that when a user completes a section and then clicks on the next one to open if the second section is longer than the first the browser window stays in the same position and essentially looks like it has scrolled to a certain point on the new section.

Thank you
Sibbo100

Hi @Sibbo100

This is fairly easy to do - have a look at lines 72-74 in the JS code. This will scroll the section to the top of the page when you click on it.

Cheers.

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. :)