Bootstrap Navigation для расширения программно

Question

Я использую меню навигации боковой панели с помощью Bootstrap, и я пытаюсь сделать его расширенным по умолчанию или динамически без нажатия пользователем кнопки. В частности, мне нужно решение, чтобы сделать по умолчанию только первый элемент списка. Я добавил «ID» и попытался сделать этот пункт меню активным. Но бесполезно.

Я добавил «ID» и попытался сделать этот пункт меню активным. Но бесполезно.

var testAreaSection = document.getElementById ("testAreaSection"); testAreaSection.classList.add ( "активный");

           <nav class="nav-primary hidden-xs">
              <ul class="nav">
                <li >
                  <a>
                    <i class="fa fa-filter icon">
                      <b class="bg-warning"></b>
                    </i>
                    <span class="pull-right">
                      <i class="fa fa-angle-down text"></i>
                      <!-- <i class="fa fa-angle-up text-active"></i> -->
                    </span>
                    <span>Filters</span>
                  </a>
                   <ul class="nav lt">

                    <li >
                    <div class="m-xs" style="padding-left: calc(100% - 110px); padding-right:0px; vertical-align:middle;">
                    <a class="btn btn-sm btn-dark btn-rounded"  data-toggle="button"><i class="fa fa-sort"></i></a>

                    <a class="btn btn-rounded btn-sm btn-icon btn-dark"  data-toggle="button"><i class="fa fa-check"></i></a>
                    <a class="btn btn-rounded btn-sm btn-icon btn-dark"  data-toggle="button"><i class="fa fa-times"></i></a>
                    </div>
                    </li>
                    <li >
                      <a>                                                        
                        <i class="fa fa-angle-right"></i>
                        <span>Buttons</span>
                      </a>
                    </li>
                 </ul
                </li>
                <li >
                  <a id="testAreaSection">
                    <i class="fa fa-check icon">
                      <b class="bg-info"></b>
                    </i>
                    <span class="pull-right">
                      <i class="fa fa-angle-down text"></i>
                      <i class="fa fa-angle-up text-active"></i>
                    </span>
                    <span>Test Area</span>
                  </a>
                  <ul class="nav lt">

                    <li >
                    <div class="m-xs" style="padding-left: calc(100% - 110px); padding-right:0px; vertical-align:middle;">
                    <a class="btn btn-sm btn-dark btn-rounded"  data-toggle="button"><i class="fa fa-sort"></i></a>

                    <a class="btn btn-rounded btn-sm btn-icon btn-dark"  data-toggle="button"><i class="fa fa-check"></i></a>
                    <a class="btn btn-rounded btn-sm btn-icon btn-dark"  data-toggle="button"><i class="fa fa-times"></i></a>
                    </div>
                    </li>
                    <li >
                      <a>                                                        
                        <i class="fa fa-angle-right"></i>
                        <span>Area 1</span>
                      </a>
                    </li>

                    </li>
                    <li >
                      <a>                            
                        <b class="badge bg-info pull-right">369</b>                                                        
                        <i class="fa fa-angle-right"></i>
                        <span>Area 2</span>
                      </a>
                    </li>
                 </ul
                </li>
              </ul>
            </nav>

У меня есть 2 раздела в приведенном выше коде, когда я расширяю каждый раздел, у меня есть список элементов. Моя проблема в том, что я должен иметь возможность контролировать развертывание / свертывание каждого раздела без щелчка пользователем. Например: я хочу, чтобы раздел «Фильтры» автоматически расширялся при загрузке страницы. Но я не мог найти способ.

Пожалуйста, помогите мне в этом.