Output all instances of a repeating field together

Question

I have Paragraphs installed and am creating a content-type which has nested Paragraphs - so there is a Paragraph with a Title Field, a Body Field - this is then nested in a another Paragraph, so that I can have several boxes across the page. So far so good - what I want to learn is to output the fields so I can put them in jQuery UI tabs.

In my template I currently have:

{{ content.field_tab_title }}
{{ content.field_body }}

Which outputs: Title Body Title Body Title Body etc.

What I need is: Title Title Title Body Body Body

So that I can put all the titles in li's for jQuery UI. I've tried putting

{% for item in items %} {{ content.field_tab_title }} {% endfor %} 

But then nothing comes out at all.

UPDATE Following Kevin's Suggestions, I've started again with my templates and have now got;

in paragraph--tab.html.twig:

<ul class="tab-box">
{{ content.field_tab_title }}
</ul>
<div>{{ content.field_body }}</div>

and in field--paragraph--tab.html.twig:

{% for item in items %} 
  <li class="tab-title">{{ item.content }}</li> 
{% endfor %}

but this is still outputting:

<ul><li>Tab Title - 1</li></ul>
<div>Body Copy 1</div>
<ul><li>Tab Title - 2</li></ul>
<div>Body Copy 2</div>

But what I need is:

<ul><li>Tab Title - 1</li><li>Tab Title - 2</li></ul>
<div>Body Copy 1</div>
<div>Body Copy 2</div>

Answer 1

This is going to be tricky, but you will need to think through the rendering layers via twig and work inside out.

Example, if you need all field tab titles in li's, the twig for field tab title (field--field-tab-title.html.twig) should look something like this:

{% for item for items %} 
  <li class="tab-title">{{ item }}</li> 
{% endfor %} 

In your Paragraph field twig, you would put the wrappers as needed, like:

<ul class="tabs">
  {{ content.field_tab_title }}
  {{ content.field_tab_body }}
</ul>

The same applies to Body:

{% for item for items %} 
  <li class="tab-body">{{ item }}</li> 
{% endfor %} 

Here is a similar example perhaps you can follow. This isn't tabbed content, but it is accordion based, so it is similar. Still paragraphs.

Main container (paragraph--component):

<div{{ attributes.addClass(classes) }}>
  {% block content %}
    {{ content }}
  {% endblock %}
</div>

Main accordion paragraph twig, extends the main container (paragraph--component is a custom twig suggestion I made for easier theming):

{% extends 'paragraph--component.html.twig' %}

{% set attributes = attributes.addClass('c-accordion') %}

{% block content %}
  {{ content }}
{% endblock %}

The accordion item itself, containing a title and other fields:

<section class="c-accordion__item">
  <input type="checkbox" class="c-accordion__trigger visuallyhidden" id="step-{{ paragraph.id() }}" />
  <label for="step-{{ paragraph.id() }}" class="c-accordion__header">
    {% if paragraph.field_accordion_step_title is not empty %}
      <h4 class="c-accordion__step">{{ content.field_accordion_step_title }}</h4>
    {% endif %}
    <h5 class="c-accordion__title">{{ content.field_accordion_title }}</h5>
  </label>
  <div class="c-accordion__body">
    <div class="c-accordion__description">{{ content.field_accordion_body }}</div>
  </div>
</section>

When this renders, all X accordion items are rendered the same way into one container. Granted, in my example, the markup container for fields live outside of the field twig and in this twig here, because I chose to have 0 field markup in that project. You can go either way you want.