[Resolved] Set parent child taxonomy in accordian

[Author]

Posts

[anthonyC-8]

How can I collapse/un-collapse a parent/child taxonomy?
My CRED form is overwhelming with every parent/child item displayed and I want to use a bootstrap accordion.

Also, is there a way to have the parent selected when a child of that parent is selected?

Thanks,
Anthony

[Nigel]

Hi Anthony

I'm not sure I understand, if you could clarify.

When you say a parent/child taxonomy you mean a hierarchical taxonomy (like categories) that can have parent and child (and grandchild) terms, right?

In my screenshot you can see I have a status hierarchical taxonomy presented as a multi-select field.

What you are asking is to, what? Break a single input such as this up into accordions?

[anthonyC-8]

Hi,

Yes a hierarchical taxonomy.
Attached is only a portion of the taxonomy. As you can see this is a long list. I'd like collapse the children so that the list is less daunting. Make sense?

Thanks,
Anthony

[Nigel]

Hi Anthony

It is not possible to modify the markup output by the cred_field shortcode, so you'll need to use JavaScript and produce a bespoke solution that works with the generated markup.

I have worked out a possible solution for you below, but please bear in mind that providing custom code is outside of our support policy and if you need help expanding on the solution you would need to consult a developer.

You'll need to add a class "accordionize" to the form group for the taxonomy fields where you want this to work.

Here you can see I added it to my status taxonomy:

	<div class="form-group accordionize">
		<label>Statuses</label>
		[cred_field field='status'  display='checkboxes' output='bootstrap']
		[cred_field field='status_add_new' taxonomy='status' type='add_new']
	</div>

Now in the custom JS add the following code:

( function( $ ) {
	$( document ).ready( function(){

		// first hide the children
		$("[class*='tax-children-']").hide();

		// now add a change event handler to the parent inputs
		$(".accordionize ul.wpt-form-set-checkboxes > li.checkbox input").change( function(){

			// parent changed, toggle its children
			$(this).parent().parent().next("[class*='tax-children-']").toggle();

		});

	});
})( jQuery );

Because the toggle is handled by the state of the parent checkbox itself, then the parent will always be checked if a child term is checked.