Reply To: Flexible content fields – global expand and collapse

• Brombardier

• January 16, 2019 at 9:23 am

I personally didn’t want Flexible Content fields to collapse automatically, but I did want a way to do so quickly and easily. For those with similar needs, here’s how I’m handling that.

Specifically, this adds a single “Collapse All” link to the top of Flexible Content fields.

/**
 * Add quick-collapse feature to ACF Flexible Content fields
 */
add_action('acf/input/admin_head', function() { ?>
    <script type="text/javascript">
        (function($) {
            $(document).ready(function() {
                var collapseButtonClass = 'collapse-all';

                // Add a clickable link to the label line of flexible content fields
                $('.acf-field-flexible-content > .acf-label')
                    .append('<a class="' + collapseButtonClass + '" style="position: absolute; top: 0; right: 0; cursor: pointer;">Collapse All</a>');

                // Simulate a click on each flexible content item's "collapse" button when clicking the new link
                $('.' + collapseButtonClass).on('click', function() {
                    $('.acf-flexible-content .layout:not(.-collapsed) .acf-fc-layout-controls .-collapse').click();
                });
            });
        })(jQuery);
    </script><?php
});

Note that this sort of thing is always subject to breaking with new ACF versions—generally you just need to keep an eye on class names.