Home Forums Feature Requests Flexible content fields – global expand and collapse Reply To: Flexible content fields – global expand and collapse

  • 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();

    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.