Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-10T21:32:57.260Z
Answers.LastActivityDate: 2017-09-10T21:46:59.953Z
Answers.LastEditDate: 2017-09-10T21:46:59.953Z
Answers.UserDisplayName: Jai Sandhu
Body: <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>
  
Tags: <entries><loop>
Title: A tabbed UI for child entries
ThreadText: # 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.
  
  ```
      <!-- Tabs -->
  {% set entries = craft.entries.section('country').level(3) %}
  <ul class="tabs">
  
  {% for entry in entries %}
  <li {% if loop.first %} class="" {% else %} class="active" {% endif %} rel="{{ loop.index }}">{{entry.pageTitle}}</li>
  
  </ul>
  
  <div class="tab_container">
  
  <!-- start tab -->
  <h3 {% if loop.first %} class="d_active tab_drawer_heading"  {% else %} class="tab_drawer_heading" {% endif %}  rel="{{ loop.index }}">{{entry.pageTitle}}</h3>
  <div id="{{ loop.index }}" class="tab_content">
  {{entry.pageTitle}}
  </div>
  <!-- end tab -->
  {% endfor %}
  </div><!-- .tab_container -->
  
  ```
  
  **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:
  
  ```
  <!-- Tabs -->
  {% set entries = craft.entries.section('country').level(3) %}
  <ul class="tabs">
     {% for entry in entries %}   
     <li class="{% if loop.first %}active{% endif %}" rel="{{ loop.index }}">{{entry.pageTitle}}</li>
     {% endif %}
  </ul>
  
  <!-- Tab_container -->
  <div class="tab_container">
     {% for entry in entries %}  
     <h3 class="{% if loop.first %}d_active{% endif %} tab_drawer_heading" rel="{{ loop.index }}">{{entry.pageTitle}}</h3>
     <div id="{{ loop.index }}" class="tab_content">
        {{entry.pageTitle}}
     </div>
     {% endfor %}
  </div>
  
  ```
  
  
  ---
  
  