Reply To: Flexible content fields – global expand and collapse

• lancemonotone

• March 1, 2023 at 1:56 pm

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
});