Question

I’m trying to generate an unordered list for my css tab interface. I’ve pretty much taken the example given to me and inserted the appropriate lines to generate the code, however the tab heading is only created once. I’m expecting 4 tab headings by using the forloop, which works if I use a standard table.

This is what the output ends up looking like: https://i.stack.imgur.com/He8Mh.jpg

It’s expected output looks like this: http://imgur.com/8xptd

Here is the HTML output that is generated: http://pastebin.com/jLf1cvYM

How can I get the forloop to generate my expected results? I’m at a loss here.

<div class="standard-tabs">
{% for vdev in pool.vdevs.all %}
{% for disk in vdev.disks.all %}

        <!-- Tabs Headings -->  
        <ul class="tabs">
        {% if forloop.first %}
                <li><a href="#{{ vdev.name }}">{{ vdev.name }}</a></li>
        {% else %}
        {% endif %}
        </ul>

        <!-- Tab Content -->
        <div class="tabs-content">
                <div id="#{{ vdev.name }}" class="with-padding">
                        {{ disk.serial }}
                </div>

{% endfor %}
{% endfor %}
</div>

Here is the example I’ve been working off:

<!-- Wrapper, set tabs style class here -->
<div class="standard-tabs">

    <!-- Tabs -->
    <ul class="tabs">
        <li class="active"><a href="#tab-1">Selected tab</a></li>
        <li><a href="#tab-2">Another tab</a></li>
        <li><a href="#tab-3">Another tab</a></li>
        <li class="disabled"><a href="#tab-4">Disabled tab</a></li>
        <li>Non-active</li>
    </ul>

<!-- Content -->
<div class="tabs-content">

    <div id="tab-1" class="with-padding">

        Selected tab

    </div>

    <div id="tab-2" class="with-padding">

        Alternate tab

    </div>

    <div id="tab-4" class="with-padding">

        Disabled tab

    </div>

    </div>

</div>

Answer 1

This is only dirty fix.. It MAY not work but as I can see You have an error. Below corrected template:

<!-- language-all: lang-html -->
<div class="standard-tabs">
        <!-- Tabs Headings -->  
        <ul class="tabs">
{% for vdev in pool.vdevs.all %}
        {% if forloop.first %}
                <li class="active"><a href="#{{ vdev.name }}">{{ vdev.name }}</a></li>
        {% else %}
                <li><a href="#{{ vdev.name }}">{{ vdev.name }}</a></li>
        {% endif %}
{% endfor %}
        </ul>

        <!-- Tab Content -->
        <div class="tabs-content">
            {% for vdev in pool.vdevs.all %}
                <div id="#{{ vdev.name }}" class="with-padding">
                    {% for disk in vdev.disks.all %}
                        {{ disk.serial }} <br />
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
</div>