Creating an accordion populated by ACF in a PHP template

[instadesign]

Continuing on from this post: Https://theme.co/apex/forum/t/accordion-using-acf-repeater-fields/62703/2?u=instadesign

…So I shouldn’t need to worry about the js, great. I tried using the shortcodes using do_shortcode() but got nowhere…

This is the code I’ve got, which is tantalisingly close:

<?php if( have_rows('statements_questions_answers') ): ?>
            <div id="q-and-a-accordion" class="x-accordion">
                  <?php $i = 0; ; while( have_rows('statements_questions_answers') ): the_row(); 
                    $title = get_sub_field('statement_question');
                    $content = get_sub_field('answer');
                    $i++; $tCount = $i;
                    ?>
                        <div  class="x-accordion-group">
                                  <div id="heading<php echo $tCount; ?>" class="x-accordion-heading">
                                    <a class="x-accordion-toggle" role="tab" data-x-toggle="collapse<?php echo $tCount; ?>" data-target="#collapse<?php echo $tCount; ?>" data-x-toggleable="<php echo $tCount; ?>" aria-expanded="false" aria-controls="collapse<php echo $tCount; ?>"><?php echo $title; ?>
                                    </a>
                                  </div>
                                  <div id="collapse<php echo $tCount; ?>" class="x-accordion-body" role="tabpanel" data-x-toggle-collapse="1" data-x-toggleable="<php echo $tCount; ?>" aria-labelledby="collapse<php echo $tCount; ?>" style=""><div class="x-accordion-inner"><?php the_sub_field('answer'); ?>
                                  </div>
                        </div>
                    <?php    endwhile; ?>
            </div>
        <?php endif; ?>

That is displaying my accordion but the accordion groups are nested rather than sequential and not interactive… I know I must be missing something relatively simple but it’s evading me!

[lely]

Hi Henry,

The content inside while loop is missing 1 closing div.

<div  class="x-accordion-group">
	<div id="heading<php echo $tCount; ?>" class="x-accordion-heading">
		<a class="x-accordion-toggle" role="tab" data-x-toggle="collapse<?php echo $tCount; ?>" data-target="#collapse<?php echo $tCount; ?>" data-x-toggleable="<php echo $tCount; ?>" aria-expanded="false" aria-controls="collapse<php echo $tCount; ?>"><?php echo $title; ?>
		</a>
	</div>
	<div id="collapse<php echo $tCount; ?>" class="x-accordion-body" role="tabpanel" data-x-toggle-collapse="1" data-x-toggleable="<php echo $tCount; ?>" aria-labelledby="collapse<php echo $tCount; ?>" style="">
		<div class="x-accordion-inner"><?php the_sub_field('answer'); ?></div>
	</div> 
</div>

Try to format the code correctly and you can see closing div at the end of tabpanel is missing.

Hope this helps.

[instadesign]

Thanks, my bad, that’s fixed the nesting, however my accordion is still just stuck open and doesn’t do anything…

[ruenel]

Hey @instadesign,

We’d love to check the page where we can find the accordion. Can you please share to us the url of the page in question?

Thank you in advance.

[instadesign]

Hi @RueNel, I’ve now migrated the site here: https://ilp.training/topic/henrys-example-section-1/

[lely]

Hi @instadesign,

Do we need to login to access that accordion? The page shows a learndash content and not accordion element by the theme. Please confirm or provide access inside a secure note if needed. Note that this is customization, we can check but any issue resulting from customization is outside the scope of our support. Thank you for understanding.

[instadesign]

Sorry @Lely, I’ve now changed the course to open access, you should now be able to view the link. Thanks.

[christian]

Hey @instadesign,

You will need to use the Accordion shortcode as that would load the Accordion’s JS also which is responsible for toggling the accordion. The said JS is minified and we don’t have that available separately neither can we extract that from the minified file.

I hope you understand that this is a customization request. If we dig into this further, it would mean that we spend custom development time.which is beyond the scope of product support.

[instadesign]

Thanks @christian_y and I appreciate that, but could you give me a clue how to set out the relevant set of shortcodes using do_shortcode() in the php file? Because this approach was not working for me at all. Thanks.

[jade]

Hello @instadesign,

The accordion shortcode should be like this:

[accordion]
    [accordion_item open="true" title="Accordion Title"]Your text here[/accordion_item]
    [accordion_item title="Accordion Title"]Your second accordion text[/accordion_item]
    [accordion_item title="Accordion Title"]Your third accordion text[/accordion_item]
[/accordion]

#Accordion Options
id: add a unique ID to the shortcode.
class: add a class or multiple classes to the shortcode.
style: add inline styles to the shortcode.

#Accordion Item Options
id: add a unique ID to the shortcode.
class: add a class or multiple classes to the shortcode.
style: add inline styles to the shortcode.
parent_id: match the ID of the parent accordion to keep only one accordion item open at a time.
title: title of the accordion item.
open: set to “true” to leave open on page load.

Hope this helps.

[instadesign]

Thanks @Jade I understand that’s how an accordion shortcode would normally be implemented, however I want to populate it using custom field content inside a php template.

[christopher]

Hi @instadesign,

Unfortunately, you will not be able to implement that, because you can not use the PHP get_field() feature of the ACF inside the do_shortcode function.

This is a customization request and outside of our support scope. I will give you my idea of how to implement the feature but the actual implementation will be on your shoulders, or you will need to hire a developer for that.

You need to consider using another library for the accordion. Maybe jQuery UI:
https://jqueryui.com/accordion/

Or Bootstrap:

Collapse

Using such, libraries allow you to add the normal HTML code in the PHP file and then use the get_field() function whenever is needed to get the Custom Field data. The Accordion feature itself can be triggered later in a Javascript file depending the way it is implemented in the library which you need to check the documentation of the library of choice.

Thank you for your understanding.