Support

Account

Register Login

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

Solving

Flexible content fields – global expand and collapse

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

  • Hi guys,

    Thanks for proposing this.

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

  • 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

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

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

  • This solution adds a “Collapse All” link to each flexible content field. When the link is clicked, it collapses all nested layout fields. Ancestors and siblings of the target group are not collapsed. In this way, you can collapse all fields at once by clicking the parent field, or target individual groups.

    Vanilla JS: 

    add_action('acf/input/admin_head', function() { ?>
    <script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  let collapseButtonClass = 'collapse-all';

  // Add a clickable link to the label line of flexible content fields
  let flexibleContentFields = document.querySelectorAll('.acf-field-flexible-content');
  for (let i = 0; i < flexibleContentFields.length; i++) {
    let label = flexibleContentFields[i].querySelector('.acf-label');
    label.innerHTML += '<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
  let collapseButtons = document.querySelectorAll('.' + collapseButtonClass);
  for (let i = 0; i < collapseButtons.length; i++) {
    collapseButtons[i].addEventListener('click', function() {
      let flexibleContent = this.closest('.acf-field-flexible-content').querySelector('.acf-flexible-content');
      let layoutItems = flexibleContent.querySelectorAll('.layout');
      for (let j = 0; j < layoutItems.length; j++) {
        layoutItems[j].classList.add('-collapsed');
      }
    });
  }
});
</script><?php
});

    jQuery:

    add_action('acf/input/admin_head', function() { ?>
    <script type="text/javascript">
jQuery(function($) {
            let 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() {
                  $(this).
                      closest('.acf-field-flexible-content').
                      find('.acf-flexible-content .layout').
                      addClass('-collapsed');
                });

          });
</script><?php
});

  • 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);
            }
        } 
    });
Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Flexible content fields – global expand and collapse’ is closed to new replies.