[Resolved] Use Repeating Fields for Accordion Title and Content

[Author]

Posts

[ianP9742]

I have created two custom fields, named Day Description and Day by Day Itinerary. I would like to display Day Description as the title of each accordion, and show Day by Day Itinerary as the accordion content.

I've tried to implement the instructions here: https://toolset.com/forums/topic/basic-accordion-implementation-in-views-without-shortcode/ – but the output I get puts all of the values of the first repeater field into the title of the accordion.

You can see what I've done here: hidden link
On the screenshot, it's the section with the blue background.

Thanks!

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting Toolset support. We can use index to make accordion using repeating field. Here is an example of accordion.

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapse-0" aria-expanded="false" aria-controls="collapse-0"> [types field='title' index="0"][/types] </a>
<div class="collapse in" id="collapse-0">
  <div class="well"> [types field='description' index="0"][/types] </div>
</div>
<br>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapse-1" aria-expanded="false" aria-controls="collapse-1"> [types field='title' index="1"][/types] </a>
<div class="collapse in" id="collapse-1">
  <div class="well"> [types field='description' index="1"][/types] </div>
</div>

⇒ Please don’t forget to update field names from above code.

Here is doc for more details:
https://toolset.com/documentation/user-guides/repeating-fields/#Index%20parameter%20Repeating%20Fields

Please share your Debug Information with us so we can see it? I have enabled debug info box for your next reply:
https://toolset.com/faq/provide-debug-information-faster-support/

If still issue arise, please provide temporary access WP-Admin Login info to your site. Your next answer will be private which means only you and I have access to it.

=== Please backup your database and website ===

✙ I would additionally need your permission to de-activate and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important.

✙ Please provide backend-end screenshot and highlight the fields which are having this issue.

Thank you

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Wordpress login info is not working, can you please double check and provide us working login info?

I have again enabled private message box.

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Login is working now, I am working on this issue and will update you shortly with my findings.

Thank you for your patience.

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hello,

I have made shortcode for repeatable field accordion and added following code:

// Add Shortcode
function get_repeatable_field_accordion_fun ( $atts ) {
 	global $post;
    // Attributes
    $atts = shortcode_atts(
        array(
            'field_slug_title' => '',
			'field_slug_desc' => '',
        ), $atts);
 
 	$content = '';
	 
	$titles = get_post_meta($post->ID, 'wpcf-'.$atts['field_slug_title'], false);
	for($i=0; $i < count($titles); $i++) {
		
			$content .= '<div class="acc-container">';
				$content .= '<p><a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapse-'.$i.'" aria-expanded="false" aria-controls="collapse-'.$i.'">'.do_shortcode('[types field="'.$atts['field_slug_title'].'" index="'.$i.'"][/types]').'</a></p>';
				$content .= '<div class="collapse in" id="collapse-'.$i.'">';
  					$content .= '<div class="well">'.do_shortcode('[types field="'.$atts['field_slug_desc'].'" index="'.$i.'"][/types]').'</div>';
				$content .= '</div>';
			$content .= '</div>';
		
	}
	return $content; 
}
add_shortcode( 'get_repeatable_field_accordion', 'get_repeatable_field_accordion_fun' );

Here:
hidden link

And added following shortcode in layout:
Shortcode:

[get_repeatable_field_accordion field_slug_title="day-description" field_slug_desc="itinerary"]

And now it’s dynamic and working fine but issue arise in Divi theme and accordion.

I have thoroughly checked your site and found that there is some issue in Divi theme, when I activated default theme (2016), tabs work as expected. But when Divi theme is activated tabs do not work, even Toolset layouts plugin is deactivated, You can check on the page below (ofcourse with Toolset layout deactivated and Divi activated):
hidden link

As a workaround please follow the instructions provided by Beda:
https://toolset.com/forums/topic/tabs-and-accordions-not-working-with-divi-child/#post-548694

Thank you

[ianP9742]

Hi Noman,

Thanks for looking into this. I have implemented the steps that Beda suggested here: https://toolset.com/forums/topic/bootstrap-broken-with-recent-divi-theme-update/#post-336047

Unfortunately, it is still not working :/ What are our next steps to solve this?

Thanks again!

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hello,

I have removed newly added code from child theme functions.php as it was not working with Divi and added small code for jQuery accordion.

Here is JS code:

jQuery(document).ready(function( $ ){
    $("#accordion > .accordion-group > .ac-title").click(function(){
	
		if(false == $(this).next().is(':visible')) {
			$('#accordion > .accordion-group > .accordion-body').slideUp(300);
			$('#accordion > .accordion-group > .ac-title').removeClass('collapsed');
		}
		
		$(this).toggleClass('collapsed');
		$(this).next().slideToggle(300);
		
	});
	
	//open first item
	$('#accordion > .accordion-group > .accordion-body:eq(0)').show();
});

I have added here:
hidden link

Here is CSS code:

#accordion .ac-title {
	margin: 1px;
	cursor: pointer;
	padding: 5 5 5 7px;
}
.accordion-body {
	display: none;
	cursor: auto;
	background-color: #fff;
	padding: 0 0 0 7px;
}

I have added here:
hidden link

And here is updated shortcode:

// Add Shortcode
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' );

And now it’s working fine.

Please check here:
hidden link

Thank you

[ianP9742]

Hi there,

Unfortunately, there are still some issues on the site. Since making the changes, the other page we have on the site that is built with Divi has become completely unresponsive. (I can't even inspect in Chrome, so I can't see what errors are being logged).

Here's the link: hidden link

I am also not too keen on having any unnecessary plugins on the site, so once we have completed this process I will move all of the CSS and JS (and the script for the short code). At this stage, though, please help me solve the issue of unresponsive Divi pages.

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

I have deactivated both plugins (Code snippet and Custom CSS and JS), meaning that the code I have added is not effecting on the site now. But still this page is not working:
hidden link

It looks like a different issue, please kindly open a new separate ticket for new issues and we would be happy to help. This will help other users with similar problems to find solutions when searching the forum, We do not handle multiple issues in the same ticket as per support policy. https://toolset.com/toolset-support-policy/

Thank you

[ianP9742]

Thank you Noman. I have created a new ticket: https://toolset.com/forums/topic/site-content-freezes/

I would appreciate your urgent assistance in this matter. Have a good Friday!

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Thanks for your co-operation and creating a separate ticket. Please kindly mark this issue as resolved as Accordion issue is resolved with the custom code I have provided you.

Have a great day,
Thank you

[ianP9742]

Hi Noman,

Unfortunately, I don't agree with you here :/
At the moment, site development is completely on hold until both of these issues are resolved. On the other ticket, Beda made it clear that the kind of support on this ticket falls outside of typical support that Toolset provides, but I am now stuck with an unusable site. As our work on the Accordion functionality resulted in a serious PHP error, the two tickets are related.

Please let me know what the best way is for us to proceed to resolve these issues as quickly as possible.

[Noman Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hello,

I saw two errors (see attached screenshot) for a moment, then after refresh the page, errors disappeared.

I have removed those two plugin that I have installed and also remove all code that I have added, and reverted all the changes I made earlier.

I have also deactivated all Toolset plugins but the homepage still freezes:
hidden link

If you have still any doubt, then please restore the site from the backup and see if home page works or not? After that we will proceed again and check which breaks the Home page.

Looks like something went wrong on your site. I really want to help you out.

Thank you