Bootstrap 4 Collapse Freezing Page

Question

Проблема требует немного справочной информации, чтобы иметь смысл.У меня есть куча страниц с историями на вымирающем языке.Каждая история разбита на отдельные строки.По умолчанию на странице отображается только полный английский текст и полный текст на другом языке.В каждой строке есть небольшая кнопка переключения, которая позволяет им открывать пословный перевод.

У меня также есть кнопка Toggle All вверху, которая открывает и закрывает все пословные переводы.,Он работает гладко для историй, которые имеют менее двадцати строк, но у нас есть пара историй с более чем 100 строками, и на этих страницах кнопка Toggle All занимает более 30 секунд.

IЯ в некоторой степени программист среднего уровня, у которого есть чему поучиться, и мне интересно, есть ли способ, которым я могу переписать это, чтобы сделать его быстрее / эффективнее.

Вот скриншот одной такой страницы.

Вот HTML-код одной строки примера из истории

<div class="row">
   <div class="col-lg-2 col-xs-12">
      <audio id="line1audio" src="sounds/GivingaShottoaSheep2/1_that_guy_there_EC.mp3" preload="auto"></audio>
      <button class="btn btn-light" onclick="document.getElementById('line1audio').play();"><i class="fas fa-volume-up"></i></button> &nbsp;<button class="btn btn-info" type="button" data-toggle="collapse" data-target=".multi-collapse1" aria-expanded="false" aria-controls="line1gloss line1Translation">Gloss</button>&nbsp; &nbsp;
   </div>
   <div class="col-lg-5 col-xs-12">
      <p class="mainPomo">bo:w jaʔnamo:w</p>
   </div>
   <div class="col-lg-5 col-xs-12 collapse multi-collapse1 show translation" id="line1Translation">
      <p>That guy there,</p>
   </div>
</div>
<div class="row collapse multi-collapse1 gloss" id="line1gloss">
   <div class="col-lg-2 col-xs-0"></div>
   <div class="col-lg-10 col-xs-12">
      <dl>
         <div class="word">
            <dt>bo:w</dt>
            <dd>here</dd>
         </div>
         <div class="word">
            <dt>jaʔ</dt>
            <dd>person</dd>
         </div>
         <div class="word">
            <dt>-nam</dt>
            <dd>-the</dd>
         </div>
         <div class="word">
            <dt>-mo:w</dt>
            <dd>-he</dd>
         </div>
      </dl>
      <br style="clear:both;"/> 
      <p  class="mainEnglish">That guy there,</p>
      <br/>
   </div>
</div>

Вот код, обеспечивающий работу кнопки Toggle All

// this script is the mechanism behind the button that allows you to toggle all of the glosses at once

//if buttonPresses is even, we open all of the glosses. If it is odd, we close them all. 
var buttonPresses = 1;

function toggleAllGlosses(idAddOn){
    // build some IDs to getElementsBy
    var toggleAllButtonId = "toggleAllButton";
    var glossId = "gloss";
    var translationId = "translation";
    // check to see if it is the main story, in which case we don't do anything. If idAddOn is not blank, this
    // must be one of the other story versions, and we must add idAddOn to these three variables
    if(idAddOn != undefined){
        toggleAllButtonId += idAddOn;
        glossId += idAddOn;
        translationId += idAddOn;
    }

    // get the button 
    var toggleAllButton = document.getElementById(toggleAllButtonId);

    // get all of the glosses
    var glosses = document.getElementsByClassName(glossId);
    var translations = document.getElementsByClassName(translationId);

    // how the toggle all button actually works

    // increase buttonPresses by one
    buttonPresses++;
    // if buttonPresses is even...
    if(buttonPresses%2 == 0){
        // show each gloss and hide each translation.
        for(var i=0; i<glosses.length;i++){
            $(glosses[i]).collapse("show");
            $(translations[i]).collapse("hide");
        }
    }

    // if buttonPresses is odd...
    else{
        // hide each gloss and show each translation.
        for(var j=0; j<glosses.length;j++){
            $(glosses[j]).collapse("hide");
            $(translations[j]).collapse("show");
        };
    };
};