django jquery hide by default

Question

I have made a form with django and made 3 categories. Now with slideToggle() i can hide or show the part of the form. Now i try to hide the 2nd and 3rd tab by default. and that is where i get stuck.

my django template:

<form action="{% url 'item_create' %}" method="post">{% csrf_token %}
    <ul>
        <li class="title">Basic information</li>
        <li class="fields">
        {% for field in item_form %}
            {% if field.name == "min_level" %}
        </li>
        <li class="title">Requirements</li>
        <li class="fields">
            {% endif %}
            {% if field.name == "strength" %}
        </li>
        <li class="title">Bonus</li>
        <li class="fields">
            {% endif %}
            <p><b>{{ field.label_tag }}</b>{{ field }}</p>
        {% endfor %}
        </li>
    </ul>
    <input type="submit" value="Submit" />
</form>

my script:

$(function(){
    $('li.fields').filter(":nth-child(3)").hide();  
    $('ul').on('click', 'li.title', function(){
        $(this).next().slideToggle(200)
    })
});

I am new to javascript and I dont fully understand the "selector" can someone please help me out here.

Answer 1

The :nth-child(3) will match the third child element. In your case, it won't be very elegant solution, because those children have mixed CSS classes.

Specifically, your filtered elements (with class fields) are 2nd, 4th and 6th child, respectively.

Instead, you might want to do slicing with jQuery:

$(function(){
    $('li.fields').slice(1).hide();
    // and then the on-click stuff...
});