How to make foldable Ad packages with CP Addons plugin

CP Addons plugin displays options for each Ad Package on an ad submit form. It replaces standard ClassiPress Ad packages drop-down with an expanded list of options. This instruction helps to make Ad Packages options foldable and display only options for selected package.

So, the default layout you can see on the image below.

CP Addons Ad Packages options — CP Addons options for each Ad Package, default layout

There are separated sections for each price package, every section includes a list of add-ons. Packages can have different number of add-ons, depending on Include/ Exclude options. A user will see the full list of packages on the Create Ad page.

This looks pretty fine if you use few Ad Packages and Addons. Otherwise, you’ll get a very long list of options.

To reduce this list, you may want to dynamically display Addons options only for selected Ad Package.

CP Addons options for each Ad Package, foldable layout

Unfortunately, currently there is no such option, but you can add a custom code to enable this feature.

function my_cp_form_premium_options() {
	global $cp_options;
	
	if ( 'single' !== $cp_options->price_scheme ) {
		return;
	}
	?>
	<script>
		jQuery( function( $ ) {
			$( '.plan-addon-options' ).appendTo( '#ad_packages tbody' );
			$( '#ad_packages tr.plan-option' ).click( function() {
				$( 'tr.plan-addon-options' ).removeClass( 'is-active' );
				var id = $( this ).find( 'input[name=ad_pack_id]' ).attr( 'id' );
				$( this ).parent().find( '#' + id + '-addons.plan-addon-options' ).addClass( 'is-active' );
			} );

			if ( $( '#ad_packages tr.plan-option input[name=ad_pack_id]:checked' ).length > 0 ) {
				$( '#ad_packages tr.plan-option input[name=ad_pack_id]:checked' ).closest( 'tr.plan-option' ).click();
			}
		} );
	</script>
	<style>
		#ad-packs {
			width: initial!important;
		}
		tr.plan-addon-options {
			display:none;
		}
		tr.plan-addon-options.is-active {
			display:table-row;
		}
	</style>	
	<?php
}
add_action( 'cp_form_premium_options', 'my_cp_form_premium_options' );

You can easily add this PHP code using Code Snippets plugin. Read how to do this in our article Easy way to add custom PHP code on your WordPress site.

This mode compatible with ClassiPress v3 and ClassiPress v4 versions and CP Addons plugin v1.3.0+

If you have any question or you think this should be implemented in the plugin by default, so feel free to leave your comments.

Updated on March 31, 2020:

The code snippet updated. Addons options block moved down under packages.

Anonymous likes this.