Reply To: Flexible content fields – global expand and collapse

• daveoudshoorn

• May 3, 2023 at 11:44 am

I messed around with a code to collapse with shift-click on Flexible Content ‘headers’. Shift-click felt more natural than a button somewhere on the page.

It also works with the pretty-edit-pen icon from ACF Extended. Not further tested on other Extended settings.

It checks if the currently clicked header is open/closed, and applies open/close to all other elements accordingly. Some weird timeout function was required not to interfere with (probably) default click behaviour?

For anyone interested you can add this to admin JS:

    // Function to handle shift+click event on .acf-fc-layout-handle
    $('.acf-fc-layout-handle').on('click', function(e) {
        if (e.shiftKey) {
            e.preventDefault();
            closestLayout = $(this).closest('.layout');

            if (closestLayout.hasClass('-collapsed')) {
                // console.log('Layout is hidden');
                setTimeout(function(){
                    $('.acf-flexible-content .values .layout').removeClass('-collapsed');
                    $('.acf-flexible-content .acfe-fc-placeholder').addClass('acf-hidden');
                  }, 1);
            } else {
                // console.log('Layout is visible');
                setTimeout(function(){
                    $('.acf-flexible-content .values .layout').addClass('-collapsed');
                    $('.acf-flexible-content .acfe-fc-placeholder').removeClass('acf-hidden');
                  }, 1);
            }
        } 
    });