Collapse Fold WordPress Meta Boxes and ACF Field Groups, Fields in admin/backend

In this post we will demonstrate a neat trick for making WordPress Meta Boxes and ACF | Advanced Custom Fields “Collapse Fold” in admin/backend.

There are cases where a large number of Meta Boxes are displayed in backend and it can be very confusing for clients/editors. To make it a bit easier in terms of content management we thought of a small jQuery trick.

Please see below:

Collapse Meta Boxes on all admin pages

function admin_meta_boxes_collapse() {

    if ( is_admin() ) {

		echo "<script type='text/javascript'>
		// <![CDATA[
			(function ($) {
				$(document).ready(function(){				
					$('#postbox-container-2 .postbox').addClass('closed');			
				});
			})(jQuery);
		// ]]>
		</script>";  
		
	}   
}

add_action( 'admin_notices', 'admin_meta_boxes_collapse' );

Note: the above code will collapse all admin Meta Boxes on each page load. “#postbox-container-2” is the admin container holding all main column (under native WP Editor) Meta Boxes so only those will be affected.

 

Collapse Meta Boxes only on specific admin page

function admin_home_page_meta_boxes_collapse() {

    global $my_admin_page;
    $screen = get_current_screen();

    if ( is_admin() && ($screen->id == 'page') ) {
        global $post;
        $id = $post->ID;
        $home = '2';
		if ($id === $home){


		echo "<script type='text/javascript'>
		// <![CDATA[
			(function ($) {
				$(document).ready(function(){				
					$('#postbox-container-2 .postbox').addClass('closed');	
			
				});
			})(jQuery);
		// ]]>
		</script>";  
		}   
        
    }
}

add_action( 'admin_notices', 'admin_home_page_meta_boxes_collapse' );

Note: in above example we applied our trick only on Home Page which in our case was a page with ID “2”.

FINAL RESULT

If you would like to use one of the above functions in your WordPress Theme, please just copy and paste the code into your Theme functions.php file.

Back to all newsBack to all news