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, 3 months 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.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 14:00 – 18:00 13:00 – 18:00 -

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 18 replies, has 2 voices.

Last updated by Thomas Garric 4 years, 3 months ago.

Assigned support staff: Shane.

Author
Posts
#1085807

Hi,

I'm trying to display on a taxonomy archive, custom accordions using a repeatable group including:
- a title
- a description

Each accordion should be unique, i.e. some posts could have only one accordion ("learn more" for example), and some other two or three accordions. Both the title and the description should be customized depending on the post.
If no accordion is created in the post editor, nothing should be displayed.

I have followed this topic: https://toolset.com/forums/topic/use-repeating-fields-for-accordion-title-and-content/
The repeatable group is created.
The JS was inserted in the JS editor of the loop item part, in the taxonomy archive.
The function was inserted in the functions.php and the shortcode in the loop item.
But nothing appears actually...

<div id="accordion"></div> is empty

Thanks for your suggestions/help

#1085837

Shane
Supporter

Languages: English (English )

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

Hi Thomas,

Thank you for contacting our support forum.

Would you mind providing me with admin access to the site so that I can have a look at this for you ?

The private fields will be enabled for your next response.

Thanks,
Shane

#1085853

Tell me if you need more details because everything is in french ?

Thanks

#1085873

Shane
Supporter

Languages: English (English )

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

Hi Thomas,

Thank you for the login credentials,

However i'm not seeing the accordion that you are referring to, i'm only seeing the js code for it.

Thanks,
Shane

#1086556

Hi Shane,

Here is the code inserted in the functions.php:

function get_repeatable_field_accordion_fun ( $atts ) {
    global $post;
    // Attributes
    $atts = shortcode_atts(
        array(
            'field_slug_title' => '',
            'field_slug_desc' => '',
        ), $atts);
  
    $content = '<div id="accordion">';
      
    $titles = get_post_meta($post->ID, 'wpcf-'.$atts['field_slug_title'], false);
    for($i=0; $i < count($titles); $i++) {
         
            $content .= '<div class="accordion-group">';
                $content .= '<div class="ac-title collapsed btn btn-primary">'.do_shortcode('[types field="'.$atts['field_slug_title'].'" index="'.$i.'"][/types]').'</div>';
                $content .= '<div class="accordion-body">';
                    $content .= '<div class="well">'.do_shortcode('[types field="'.$atts['field_slug_desc'].'" index="'.$i.'"][/types]').'</div>';
                $content .= '</div>';
            $content .= '</div>';
         
    }
    $content .= '</div>';
    return $content; 
}
add_shortcode( 'get_repeatable_field_accordion', 'get_repeatable_field_accordion_fun' );
#1087541

Shane
Supporter

Languages: English (English )

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

Hi Thomas,

This shortocde takes the field slug as a parameter.

I see that you haven't provided the field slug for this.

What you need to do is provide the slug of the repeatable fields like below.
[get_repeatable_field_accordion field_slug_title="day-description"]

Thanks,
Shane

#1087554

I've inserted this shortcode but the accordion still doesn't show up.

I don't understand why we use "day-description" as slug because it doesn't exist.

#1087606

Shane
Supporter

Languages: English (English )

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

Hi Thomas,

I think this is probably not the best approach to do because we have code that can loop through each individual repeatable field.

I tried logging into the site again to check but it doesn't work.

However you can use our shortcode to loop through each item.
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-for-each

Thanks,
Shane

#1088251

Hi Shane,

I had to change the password. Here is the new one: Bj2%awCyLwBcGq(7

I tried to use the new shortcode but it doesn't display any accordeon. Could you please have a look?

Thanks a lot

#1088454

Shane
Supporter

Languages: English (English )

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

Hi Thomas,

I'm going to enable the private fields for you to send me the full credentials as well as the example page where I can find this accordion code.

What I will be doing is to use the shortcode to implement the accordion.

The private fields have been enabled.

Thanks,
Shane

#1088589

Shane
Supporter

Languages: English (English )

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

Hi Thomas,

I did some checking on this and it seems your field group or image field isn't a repeated image. It actually wouldn't be possible to create an accordion with this data.

Thanks,
Shane

#1089520

Hi Shane,

It's impossible to create repeating fields that are not images?

So why there was a tutorial to create accordion based on repeating fields?
https://toolset.com/forums/topic/use-repeating-fields-for-accordion-title-and-content/

Maybe Noman could give us some details on this topic?

#1089572

Shane
Supporter

Languages: English (English )

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

Hi Thomas,

It should be possible but i'm not seeing where you have any repeatable fields ?

If you do could you send me 1 post that has the repeatable fields?

Thanks,
Shane

#1090134

Hi Shane,

Here is a video post with a repeating field "Accordion" at the bottom:
hidden link

#1090264

Shane
Supporter

Languages: English (English )

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

Hi Thomas,

The accordion should be working fine now.

hidden link

I was able to set it up using this view here.
hidden link

Because this is a repeatable field group and not just a repeatable field, then a view is required to get it working correctly.

Thanks,
Shane