ACF flexible content layout group for table of contents - php

Question

I have an ACF flexible content field with a layout name of 'post_section' which has a group field called 'paragraph' with fields for 'id', 'title' and 'text'. In my component-post_section.php file i have the following php:
<?php if( have_rows('paragraph') ): ?>
<?php while( have_rows('paragraph' ) ): the_row(); ?>
<div class="container">
<div class="row" id="<?php the_sub_field('id'); ?>">
<h2><?php the_sub_field('title'); ?></h2>
<?php the_sub_field('text'); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
This produces the following which is fine:
But im trying to produce the following - a bootstrap accordion table of contents above with the titles of the two post_section titles:
This is my php:
<?php if( have_rows('paragraph') ): ?>
<?php while( have_rows('paragraph' ) ): the_row(); ?>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Table of Contents
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<p><?php the_sub_field('title'); ?></p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row" id="<?php the_sub_field('id'); ?>">
<h2><?php the_sub_field('title'); ?></h2>
<?php the_sub_field('text'); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
However, this is what i get:
Any ideas on how i can achieve what i want i.e an output of my title and text field fields for each paragraph BUT only a single output of the titles in the table of contents div like this?
Maybe i need to create a separate component php file for the accordion?
Thanks for any help.

Answer 1

If I am understanding your question right, you simply want a single accordion dropdown to reveal a list of your flexible content paragraph sections?
The single accordion dropdown content is essentially a list of anchor links to navigate directly directly to your flexible content paragraph sections.
If this is the case, then see working example below of how to achieve this.
All of this code below must be run inside your post loop.
<div class="container">
<?php if(have_rows('paragraph')): ?>
<div class="accordion" id="tableContentsAccordion">
<div class="card">
<div class="card-header" id="tableContents">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#tableContentsList" aria-expanded="true" aria-controls="tableContentsList">
Table of Contents
</button>
</h2>
</div>
<div id="tableContentsList" class="collapse show" aria-labelledby="tableContents" data-parent="#tableContentsAccordion">
<div class="card-body">
<?php while(have_rows('paragraph')): the_row();
$title = get_sub_field('title');
?>
<?php echo $title; ?><br/>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
<?php endif; ?>
<?php if(have_rows('paragraph')): ?>
<div class="row">
<?php while(have_rows('paragraph')): the_row();
$title = get_sub_field('title');
?>
<div class="col-12" <?php echo $title ? 'id="' . sanitize_title($title) . '"' : ''; ?>>
<?php echo $title ? '<h2>' . $title . '</h2>' : ''; ?>
<?php the_sub_field('text'); ?>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
As mentioned in previous comments on your question, you need to run the have_rows('paragraph') statement twice in order to output flexible content paragraph sections content in two separate html locations.
You can actually combine all my code into a single have_rows('paragraph') statement, but only if your section content immediately follows your table of contents html.
If you want to put your table of contents in the sidebar or anywhere separate from your paragraph section output, then you will need to use have_rows('paragraph') twice.
Update 1
So in response to your first comment, I created this example ACF flexible content field on a test environment.
Flexible content field named paragraphs and field location set to Post post type.
With a single block layout named paragraph with two sub fields title and name...
I then created a new post with this flexible content data...
I then ran this php code in my single.php...
<?php
// get our header
get_header();
?>
<main>
<div class="container">
<?php if(have_posts()): ?>
<?php while(have_posts()) : the_post(); ?>
<h1 class="pb-2 my-4 border-bottom"><?php the_title(); ?></h1>
<?php if(have_rows('paragraphs')): ?>
<div class="accordion" id="tableContentsAccordion">
<div class="card">
<div class="card-header" id="tableContents">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#tableContentsList" aria-expanded="true" aria-controls="tableContentsList">
Table of Contents
</button>
</h2>
</div>
<div id="tableContentsList" class="collapse show" aria-labelledby="tableContents" data-parent="#tableContentsAccordion">
<div class="card-body">
<?php while(have_rows('paragraphs')): the_row(); ?>
<?php $title = get_sub_field('title'); ?>
<?php echo $title; ?><br/>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
<?php endif; ?>
<?php if(have_rows('paragraphs')): ?>
<div class="row my-4">
<?php while(have_rows('paragraphs')): the_row(); ?>
<?php $title = get_sub_field('title'); ?>
<div class="col-12" <?php echo $title ? 'id="' . sanitize_title($title) . '"' : ''; ?>>
<?php echo $title ? '<h2>' . $title . '</h2>' : ''; ?>
<?php the_sub_field('text'); ?>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</main>
<?php
// get our footer
get_footer();
And this is the tested output within the <main> html element...
This update code is the same as my first code example, but I've changed the flexible content field name from paragraph to paragraphs in this second update example, and I've also included the full singe.php post loop.
Not sure how my code outputted your However screenshot?
Let me know if you need more help.