Stack Exchange
Issue with tab's li checking
Good day, all! I added tabs to my html-page for showing of one model objects in another. 
My code:


.tabordion {
    display: block;
    position: relative;
}

.tabordion input[name="sections"] {
    left: -9999px;
    position: absolute;
    top: -9999px;
}

.tabordion section {
    display: block;
}

.tabordion section label {
    border-bottom: 1px solid #696969;
    cursor: pointer;
    display: block;
    padding: 15px 20px;
    position: relative;
    width: 221px;
    z-index: 100;
}

.tabordion section article {
    display: none;
    left: 230px;
    min-width: 300px;
    padding: 0 0 0 21px;
    position: absolute;
    top: 0;
}

.tabordion section article:after {
    bottom: 0;
    content: "";
    display: block;
    left: -229px;
    position: absolute;
    top: 0;
    width: 220px;
    z-index: 1;
}

.tabordion input[name="sections"]:checked + label {
    font-weight: bold;
}

.tabordion input[name="sections"]:checked ~ article {
    display: block;
}
<div class="tabordion">
    <h4>Contents</h4>
    {% for subject in subjects %}
        {% if subject.book|safe == book.name|safe and subject.author|safe == user.username|safe %}
            <section id="section{{ subject.id }}">
                <input type="radio" name="sections" id="option{{ subject.id }}" checked>
                <label for="option{{ subject.id }}">{{ subject.name }}</label>
                <article>
                    {{ subject.content }}
                </article>
            </section>
        {% endif %}
    {% endfor %}
</div>



By the way, I'm making django project. 
The issue is that last section checked in list at first. This is vertical tabs, I need first section in list checked. What's wrong with my code?
This is generated code:
<div class="tabordion">
        <section id="section1">
            <input type="radio" name="sections" id="option1" checked="">
            <label for="option1">New album</label>
            <article>
                Content
            </article>
        </section>



        <section id="section2">
            <input type="radio" name="sections" id="option2" checked="">
            <label for="option2">Name</label>
            <article>
                Content
            </article>
        </section>   
</div>


Can you post generated HTML?

I don't see any li or ul in the posted code

Oh, really sorry, forgot that changed code. Anyway, does it matter that it is not ul-tabs?


I need first section in list checked. What's wrong with my code?

You mark every radio button as checked:
<input type="radio" name="sections" id="option{{ subject.id }}" checked>

... however only one of the group can be checked, so the last one wins. Instead render checked attribute on the first radio input only using forloop.first flag in if block:
<input type="radio" name="sections" id="option{{ subject.id }}" {% if forloop.first %}checked{% endif %}>

Entire template:
<div class="tabordion">
    <h4>Contents</h4>
    {% for subject in subjects %}
        {% if subject.book|safe == book.name|safe and subject.author|safe == user.username|safe %}
            <section id="section{{ subject.id }}">
                <input type="radio" name="sections" id="option{{ subject.id }}" {% if forloop.first %}checked{% endif %}>
                <label for="option{{ subject.id }}">{{ subject.name }}</label>
                <article>
                    {{ subject.content }}
                </article>
            </section>
        {% endif %}
    {% endfor %}
</div>


Oh, thank you exactly for "{% if forloop.first %}checked{% endif %}".
