Toggle fields group on the ClassiPress listing form

This mod can be useful if your ClassiPress listing form has too many fields and you want to toggle fields group visibility via button or a link.

Toggle visibility for a fields group
Toggle visibility for a fields group

Especially, this important for mobile devices, where the long forms look complex and boring for your ad authors.

There are only two steps to implement this mod on your ClassiPress site.

1. Select which fields you want to toggle.

Use ClassiPress form builder and move all these fields below the listing Description field. The Description field will be the last field to be shown on page load. All fields below will be hidden until user clicked the Toggle link.

2. Add JavaScript snippet on your page.

Add the following code in your theme JavaScript scripts file.

jQuery( function( $ ) {
	$( 'form.form_step #list_post_content' ).each( function() {
		var collapsed = $( this ).nextUntil( '.ad-details-images-sep', '.form-field' );

		if ( collapsed.length < 1 ) {
			return false;
		}

		collapsed.wrapAll('<div id="moreFieldsWrapper" class="hidden"></div>');
		$( this ).after( '<div class="form-field"><a id="moreFieldsToggle" href="#">For more options click here &nbsp;</a></div>' );
	} );
    $( '#moreFieldsToggle' ).on( 'click', function(e) {
        e.preventDefault();
        $( '#moreFieldsWrapper' ).toggle();
    } );
} );

Alternatively, you can add this JS code via Code Snippets plugin. But you will need to wrap it in following way:

add_action( 'wp_head', function () { ?>
<script>

jQuery( function( $ ) {
	$( 'form.form_step #list_post_content' ).each( function() {
		var collapsed = $( this ).nextUntil( '.ad-details-images-sep', '.form-field' );

		if ( collapsed.length < 1 ) {
			return false;
		}

		collapsed.wrapAll('<div id="moreFieldsWrapper" class="hidden"></div>');
		$( this ).after( '<div class="form-field"><a id="moreFieldsToggle" href="#">For more options click here &nbsp;</a></div>' );
	} );
    $( '#moreFieldsToggle' ).on( 'click', function(e) {
        e.preventDefault();
        $( '#moreFieldsWrapper' ).toggle();
    } );
} );

</script>
<?php } );

Additions

As you see in the code, we use element ID #list_post_content which belongs to Description field. Similarly, you can set any other field, but you will need to find its wrapper CSS ID and replace it in the code.

Form field wrapper CSS ID

Use your browser’s Developer Tools for inspecting elements on the form and finding the fields IDs.

The link text can be changed on your taste, also, the link can be converted into the button by adding CSS class “button”:

<a class="button" id="moreFieldsToggle" href="#">For more options click here &nbsp;</a>

Moreover, the button style can be changed as well! See our ClassiPress style guide for more ideas on button styles.