jquery accordion should be collapsed by default when page loads

Question

I want that my accordion is closed when the page loads. I've tried some answers here in this site, but they don't work for me.

            <div id="nestedAccordion">
                {% for key, value in TopKategorie.items %}
                    <h5 id="id_element_TopKat_{{ key }}">{{ key }}</h5>
                    <div id="container2">
                        {% for key2, value2 in value.items %}
                            <h6 id="id_element_Sub1Kat">{{ key2 }}</h6>
                            <div id="container3">
                                {% for val2 in value2 %}
                                    <h7 id="id_element_Sub2Kat"> 
                                    <a href="/order/{{ val2 }}">{{ val2 }} </a>
                                    </h7>
                                {% endfor %}
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>

And my js:

$( window ).load(function() {
  var parentDivs = $('#nestedAccordion div');
  var childDivs = $('#nestedAccordion h6').siblings('div');
  $('#nestedAccordion h5').click(function() {
    parentDivs.slideUp();
    if ($(this).next().is(':hidden')) {
      $(this).next().slideDown();
    } else {
      $(this).next().slideUp();
    }
  });
  $('#nestedAccordion h6').click(function() {
    childDivs.slideUp();
    if ($(this).next().is(':hidden')) {
       $(this).next().slideDown();
    } else {
       $(this).next().slideUp();
    }
  });
});

It would be great if someone could help me with this. Thank you!

Answer 1

I found the solution. I just had to add class collapsed

                        <div id="container2" class="collapse">