title: jquery accordion should be collapsed by default when page loads
body: <p>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.</p>
  
  <pre><code>            &lt;div id="nestedAccordion"&gt;
                  {% for key, value in TopKategorie.items %}
                      &lt;h5 id="id_element_TopKat_{{ key }}"&gt;{{ key }}&lt;/h5&gt;
                      &lt;div id="container2"&gt;
                          {% for key2, value2 in value.items %}
                              &lt;h6 id="id_element_Sub1Kat"&gt;{{ key2 }}&lt;/h6&gt;
                              &lt;div id="container3"&gt;
                                  {% for val2 in value2 %}
                                      &lt;h7 id="id_element_Sub2Kat"&gt; 
                                      &lt;a href="/order/{{ val2 }}"&gt;{{ val2 }} &lt;/a&gt;
                                      &lt;/h7&gt;
                                  {% endfor %}
                              &lt;/div&gt;
                          {% endfor %}
                      &lt;/div&gt;
                  {% endfor %}
              &lt;/div&gt;
  </code></pre>
  
  <p>And my js:</p>
  
  <pre><code>$( 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();
      }
    });
  });
  </code></pre>
  
  <p>It would be great if someone could help me with this. Thank you!</p>