A tabbed UI for child entries 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.

    &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;
I would go for two loops to make it easier to maintain sanity later on:

&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;