I have a FAQ page on a Shopify site that features an accordion. All works fine with the exception that the first panel of the accordion is open by default and I would like all panels to be closed by default on load. Once it's loaded, the user can open all if they would like but that should be their choice. They seems to be managed by the following script but I figure out what to change/add/remove in order to have them all closed by default. Any ideas? I'd greatly appreciate it.

<script type="text/javascript">
window.addEventListener('load', function() {
    $("#{{section.id}} .panel-title").click(function() {
        $(this).toggleClass("active");
        $(this).next().slideToggle();
    }); 
   $("#{{section.id}} h4+.accordion-body .panel-title").addClass("active");
});
</script>

The HTML:

<div id="{{section.id}}" class="accordion-list">                        
        {% for block in section.blocks limit: section.blocks.size%}                 
          {% if block.type == 'accordion_title' and block.settings.sectiontitle != blank %}
            <h4>{{block.settings.sectiontitle}}</h4>
          {% endif %}    
          {% if block.type == 'accordion' %}
          <div class="accordion-body">
            <h5 class="panel-title fl f-jcsb j-aic">{{ block.settings.question}}<i class="ad ad-plus-l"></i></h5>
            <div id="{{ block.id }}" class="panel-content">{{ block.settings.answer}}</div>
          </div>
          {% endif %}
        {% endfor %}
      </div>