Enable collapsing of the first field of a group

[onetrev]

Right now the first field doesn't collapse so if that is your own field or it is a really tall field the "collapsing" functionality doesn't really help you much.

I wonder if it wouldn't just be possible to collapse the entire table of the field group, because above it would still be the DIV with the group title, that should be enough right? Unless I'm missing something super obvious?

Thanks!

[kartofelek007]

I thing that better solutions is simply hide .acf-input (all input in collapsed row) by adding

.collapsed-row .acf-table .acf-input {
display: none;
}

Maybe user can no longer see text:input behind gradient, but:

1. all rows are the same
2. all issues with wysiwyg editor, google map, gallery, new select2, multiselect, custom user field etc are gone
3. http://stackoverflow.com/questions/8501727/table-row-wont-contain-elements-with-positionabsolute - gradient that fill "collapsed input" have absolute position relative to TR. This is working on FF, Chrome etc on windows, but this is wrong and probally not working on Linux etc.

[mrwweb]

@onetrev Thanks for opening this.

While flexible fields are a little more clear when completely collapsed, repeaters are completely indistinguishable when all fields are hidden.

[kartofelek007]

Hmmm. This was simple solution :D I think it is not super bad solution, because all rows have own index number. When i have lots of rows and i create new row, i want collapse earlier added rows, but I'm not interested in exactly what they contain (i only want improving my working space)

Another solution may be:

• jquery wrapAll all fields in each .acf-input with div.wrap-inputs
• when collapse -> add to div.wrap-inputs max-height and overflow:hidden. This will work well with css transition. Add gradient to this div.wrap-inputs

[mrwweb]

@kartofelek007 I've considered max-height solutions in the past. Maybe I should swing back around and take a look at those again. It looks like there's always(??) an immediate descendant of .acf-input that could handle a max-height+overflow:hidden.

[kartofelek007]

I test idea with wrapper and for me its work very well.

In ACF5 you must find each .acf-input:

$('.field_type-repeater, .field_type-flexible_content').each(function() {
     $repeater = $(this);     
     $repeater.find('.acf-input').each(function() {
            $(this).children().wrapAll('<div class="acf-collapse-wrapper"></div>')
     });
     ....
});

In ACF4 you must find .inner:

$('.field_type-repeater, .field_type-flexible_content').each( function() {
     $repeater = $(this);
     $repeater.find('.inner').each(function() {
            $(this).children().wrapAll('<div class="acf-collapse-wrapper"></div>')
     }); 
     ....
});

and in styles (for both version):

.collapsed-row .acf-collapse-wrapper {
    max-height:50px;
    position: relative;
    overflow: hidden;
}
/* change position of gradient */
.collapsed-row .acf-collapse-wrapper::after {
      ....your gradient....
}

I checked both versions (ACFPRO and acf 4.3.9) and its worked well.

Maybe its good idea to hide some elements in collapse elements? For example in wysiwyg hide add-media-button and tabs?

[mrwweb]

Glad to know that works well! I might see if I can find a way to do it without the wrapALL but it's a good proof of concept.

At least in the readme, I wrote that the most recent version would be the last functionality improvement for ACF4. If it's as easy as you showed here, I might go back on that, but I don't necessarily plan on maintaining support for both 4 and 5.

[kartofelek007]

Why you don't want use wrapAll?