Skip Navigation

[Resolved] Repeating fields for accordion

This thread is resolved. Here is a description of the problem and solution.

Problem:

The issue here is that the user wanted to build an Accordion with our Repeatable field groups.

Solution:

This can be done using bootstrap. On your view that displays the repeatable field group just add the following.

[wpv-items-found]
	<!-- wpv-loop-start -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
		<wpv-loop>
           [wpv-item index=1]
           <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-[wpv-post-id]">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-[wpv-post-id]" aria-expanded="false" aria-controls="collapse-[wpv-post-id]">
[types field='field_slug_title'][/types]        
        </a>
      </h4>
    </div>
    <div id="collapse-[wpv-post-id]" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-[wpv-post-id]">
      <div class="panel-body">
        [types field='field_slug_desc'][/types]
      </div>
    </div>
  </div>
           [wpv-item index=other]
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-[wpv-post-id]">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-[wpv-post-id]" aria-expanded="false" aria-controls="collapse-[wpv-post-id]">
[types field='field_slug_title'][/types]        
        </a>
      </h4>
    </div>
    <div id="collapse-[wpv-post-id]" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-[wpv-post-id]">
      <div class="panel-body">
                [types field='field_slug_desc'][/types]

      </div>
    </div>
  </div>
		</wpv-loop>
  </div>

	<!-- wpv-loop-end -->
	[/wpv-items-found]

Ensure that the structure remains the same and just substitute the shortcodes above with your shortcodes.

0% of people find this useful.

This support ticket is created 4 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 18 replies, has 2 voices.

Last updated by Thomas Garric 4 years, 1 month ago.

Assigned support staff: Shane.

Author
Posts
#1090311

Great job Shane! Thanks a lot!

Just an ultimate request: I'd like to close all accordions by default. I changed aria-expanded="true" to aria-expanded="false" but the first accordion is expanded on page load.

#1090317

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Thomas,

It should be fine now.

Thanks,
Shane

#1090337

Thanks!

#1096847

Hi Shane,

I've noticed one improvment for this accordion: it's not possible to reorder the accordion with the drag and drop in the back office. It's always the last accordion created which is in first position in the front office.

Is it possible to arrange that?

Thanks