Support

Account

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

Solving

Flexible content fields – global expand and collapse

    • Anu

    • March 14, 2015 at 10:40 am

    Have a button that collapses / expands all flex content blocks. Ideally, all flex content blocks should start collapsed.

    We’re using flex content fields to allow the client to create pages by adding flex content blocks that we’ve defined. There can be many – 10 to 20, each of which has lots of options (background image, editors, etc). The current state is that they all start off fully expanded, which makes the edit page very long and confusing. We nede a way to collapse all these fields and a way to make sure that’s how a page starts – ie with all flex content fields collapsed.

    This plugin does most of the above (https://github.com/mrwweb/ACF-Repeater-Collapser/), but it doesn’t cope very well with block or table layouts.

  • Massive plus 1 on this. ACF Pro is able to replace horrible page builders but this issue makes it pretty rough to hand off to the client.

    • James

    • March 30, 2015 at 10:25 am

    Hi guys,

    Thanks for proposing this.

    I have passes this to Elliot so that he can look into implementing this feature on the plugin.

    • Elliot

    • April 1, 2015 at 1:01 pm

    Hi @digitalquery

    Thanks for the feature request.

    This could be easily done by writing a small amount of JS on the page which simply loops through the flexible content layout divs, and triggers a click on the handle if it is open.

    You could run this on doc ready, or just in the footer of the page.

    Thanks
    E

    • mando

    • June 20, 2015 at 11:12 am

    This would be, for me, a huge feature. A built in method that the user can click a icon or double click the header and it collapses. The row collapse plugin solves some of this for now, but it doesn’t work with block layout. The row layout can get messy since the labels are to the left of the element.

  • I created a script for that.

    It adds a “Collapse/Expand All” checkbox above Flexible Content field groups.

    Just put the script in your functions.php file.

  • Hi Sergio,

    Your link no longer works. Is there another site to download your script?

    • James

    • April 28, 2016 at 1:19 pm

    Hi @cbratschi

    I believe you can try this code:

    function my_acf_admin_head() {
    	?>
    	<script type="text/javascript">
    	(function($){
    
    		$(document).ready(function(){
                
                $( ".-collapse" ).each(function( index ) {
                  $( this ).click();
                });
                
            });
    
    	})(jQuery);
    	</script>
    	<?php
    }
    
    add_action('acf/input/admin_head', 'my_acf_admin_head');

    Please check this page to learn more about it: https://www.advancedcustomfields.com/resources/acfinputadmin_head/.

    Thanks!

  • 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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.