<p>I would go for two loops to make it easier to maintain sanity later on:</p>

<pre><code>&lt;!-- Tabs --&gt;
{% set entries = craft.entries.section('country').level(3) %}
&lt;ul class="tabs"&gt;
   {% for entry in entries %}   
   &lt;li class="{% if loop.first %}active{% endif %}" rel="{{ loop.index }}"&gt;{{entry.pageTitle}}&lt;/li&gt;
   {% endif %}
&lt;/ul&gt;


&lt;!-- Tab_container --&gt;
&lt;div class="tab_container"&gt;
   {% for entry in entries %}  
   &lt;h3 class="{% if loop.first %}d_active{% endif %} tab_drawer_heading" rel="{{ loop.index }}"&gt;{{entry.pageTitle}}&lt;/h3&gt;
   &lt;div id="{{ loop.index }}" class="tab_content"&gt;
      {{entry.pageTitle}}
   &lt;/div&gt;
   {% endfor %}
&lt;/div&gt;
</code></pre>

CC BY-SA 3.0
2017-09-10T21:32:57.260Z
2017-09-10T21:46:59.953Z
2017-09-10T21:46:59.953Z
Jai Sandhu
<p>wonder if a guru could help, I am nearly there, just stuck on the right call. </p>

<p>Building a standard css/jquery responsive tab solution. I am pulling back child entries to populate a parent page with said tabs. The problem is the for loop, not being able to close the unordered list before the next part. I wonder if anyone could help please.</p>

<pre><code>    &lt;!-- Tabs --&gt;
{% set entries = craft.entries.section('country').level(3) %}
&lt;ul class="tabs"&gt;

{% for entry in entries %}
&lt;li {% if loop.first %} class="" {% else %} class="active" {% endif %} rel="{{ loop.index }}"&gt;{{entry.pageTitle}}&lt;/li&gt;

&lt;/ul&gt;

&lt;div class="tab_container"&gt;

&lt;!-- start tab --&gt;
&lt;h3 {% if loop.first %} class="d_active tab_drawer_heading"  {% else %} class="tab_drawer_heading" {% endif %}  rel="{{ loop.index }}"&gt;{{entry.pageTitle}}&lt;/h3&gt;
&lt;div id="{{ loop.index }}" class="tab_content"&gt;
{{entry.pageTitle}}
&lt;/div&gt;
&lt;!-- end tab --&gt;
{% endfor %}
&lt;/div&gt;&lt;!-- .tab_container --&gt;
</code></pre>

<entries><loop>
A tabbed UI for child entries
# A tabbed UI for child entries

(Asked by: username_0 on 2017-09-09)

wonder if a guru could help, I am nearly there, just stuck on the right call. 
Building a standard css/jquery responsive tab solution. I am pulling back child entries to populate a parent page with said tabs. The problem is the for loop, not being able to close the unordered list before the next part. I wonder if anyone could help please.
    
{% set entries = craft.entries.section('country').level(3) %}


{% for entry in entries %}
{{entry.pageTitle}}






{{entry.pageTitle}}

{{entry.pageTitle}}


{% endfor %}

**Tags:** entries, loop


---

## 1 answers

### Answer by username_1 on 2017-09-10. Score: 1 | Accepted answer

I would go for two loops to make it easier to maintain sanity later on:

{% set entries = craft.entries.section('country').level(3) %}

   {% for entry in entries %}   
   {{entry.pageTitle}}
   {% endif %}





   {% for entry in entries %}  
   {{entry.pageTitle}}
   
      {{entry.pageTitle}}
   
   {% endfor %}


---

