Rows collapsed by default

Thanks for the suggestion. Can you say a bit more about the use case for such an option? This is the first time I’ve heard a feature like this suggested.

If it were to be added, how would it be set? How would it work when there are no repeater instances yet?

Sometimes when I have multiple repeaters on a page (in addition to other fields and metaboxes), each with a good number of rows, it can make for a very long, visually intimidating page for my clients. Finding the right field can be harder. It’s not really a major issue, just a small tweak/idea.

I would like to second this request. As adamwalter mentions it would be great to be able to specify that a repeater field (or any other field) defaults to ‘collapsed’ initially when loading the page. Collapsed groups of repeater fields are also much easier to drag and re-order.

Are you both thinking that this would be a per-repeater setting?

It could be. But something as simple as a global option “Always collapsed / Always expanded” would be helpful.

I would like to throw in my vote for this feature – and add that it would be very useful to be able to open / close individual rows. Collapsing them all makes it easier to reorder them, but while they’re collapsed it would be really nice to be able to open 1 row in order to edit it without opening all the rows an scrolling.

i wanna throw in a vote for this as well.

+1!

Hey guys
as a fast solution I added this line at the end in original plugin .js file:

$(‘.field-repeater-toggle’).click();

Maybe not realy nice but it helps me to toggle / collapse all repeater fields on load of the edit page. Should be as this in default mode, otherwise the plugin doesn’t make sense for me – keep all expanded as it would be without plugin. Helping with collapsing just for the moment, until I save isn’t great help when it comes to keeping files organised.

Great plugin though, i just reworked it a little to fit my needs and make me feel more comfortable

+1 here as well.

In the meantime, I’ve edited field-layout.php line #7:
(added data-toggle=”closed”)
<div class="layout" data-layout="<?php echo $layout['name']; ?>" data-toggle="closed">

and further down on line #26:
(added style=”display:none”)
<table class="widefat acf-input-table <?php if( $layout['display'] == 'row' ): ?>row_layout<?php endif; ?>" style="display:none">

Correction/Follow-up to the above.

In field layout.php:

global $pagenow;
if($pagenow == "post-new.php") {
	$state = 'open';
	$display = 'block';
} elseif ($pagenow == "post.php") {
	$state = 'closed';
	$display = 'none';
}

Line #7:
<div class="layout" data-layout="<?php echo $layout['name']; ?>" data-toggle="<?php echo $state;?>">

Line #26:
<table class="widefat acf-input-table <?php if( $layout['display'] == 'row' ): ?>row_layout<?php endif; ?>" style="display:<?php echo $display;?>">

When adding new fields/rows, they become collapsed by default. Typically the user wants to edit right away. To alleviate this, I modified input.js as wel beginning around line #262:

(See lines notated with “+Added”)

// vars
var new_id = acf.helpers.uniqid(),
	new_field_html = this.$el.find('> .clones > .layout[data-layout="' + layout + '"]').html().replace(/(=["]*[\w-\[\]]*?)(acfcloneindex)/g, '$1' + new_id),
	// +Added data-toggle=open to prevent the need for double-click
	new_field = $('<div class="layout" data-toggle="open" data-layout="' + layout + '"></div>').append( new_field_html );

// hide no values message
this.$el.children('.no_value_message').hide();

// +Added show_new_field function to alter the field we hid in field-layout.php
function show_new_field (new_field) {
	new_field.find('.acf-input-table').css("display", "block").html;
	return new_field;
}

// add row
if( $before )
{
	// +Added show_new_field
	$before.before( show_new_field(new_field) );
}
else
{
	// +Added show_new_field
	this.$values.append( show_new_field(new_field) );
}

I think this would be a very useful feature as well.

+1

Not sure if this helps anyone but I wrote a super quick plugin (can’t guarantee it will work on your site but it’s working for mine) that should solve this issue. You need to have the Advanced Custom Fields Repeater & Flexible Content Fields Collapser plugin installed of course…

Here’s the link to the GitHub repo: https://github.com/JulienMelissas/acf-collapser-collapse-default you should be able to just download the zip file and upload it to your site.

Thanks for sharing this, @julienmelissas. I’m looking forward to trying it out!

I can attest to the fact @julienmelissas’ stop-gap plugin works great. Thanks Julien!

@mrwweb – looking forward to you making that plugin obsolete ; )