Как создать выпадающий sidenavbar с помощью начальной загрузки

Question

У меня есть выпадающие боковые панели навигации. На боковой панели навигации у меня есть 4 раскрывающихся списка, в каждом раскрывающемся списке есть по 2 элемента, когда страница загружается. По умолчанию необходимо открыть первый раскрывающийся список и активировать первый элемент в раскрывающемся списке. если я нажимаю кнопку «Далее», второй элемент в первом раскрывающемся списке должен активироваться. Если я снова нажму кнопку «Далее», откроется второе раскрывающееся меню, а первый элемент во втором раскрывающемся меню должен быть активирован. таким же образом, если я нажму предыдущую кнопку, нужно открыть предыдущий выпадающий список. как я могу этого достичь? Пожалуйста, помогите мне заранее спасибо.

function sidenaDropDown() {
  let dropdown = document.getElementsByClassName("dropdown-btn");
  let i;
  for (i = 0; i < dropdown.length; i++) {
    dropdown[i].addEventListener("click", function() {
      this.classList.toggle("active");
      let dropdownContent = this.nextElementSibling;
      if (dropdownContent.style.display === "block") {
        dropdownContent.style.display = "none";
      } else {
        dropdownContent.style.display = "block";
      }
    });
  }
}


let count = 0;

function activeclass(val) {
  var totalElem = document.getElementsByClassName("item");
  if (count > totalElem.length || count < 0) return;

  var list = document.getElementsByClassName("active");
  let elem;
  if (val == 'next') {
    elem = list[0].nextElementSibling;
    count++;
  } else {
    elem = list[0].previousElementSibling;
    count--;
  }
  list[0].classList.remove("active");
  elem.classList.add('active');
}

.sidenav {
  // height: 100%;
  max-width: 250px;
  // position: fixed;
  z-index: 1;
  // top: 170px;
  bottom: 0;
  top: 0;
  position: absolute;
  background-color: #dadada;
  // overflow-x: hidden;
  overflow-y: auto;
  padding-top: 20px;
  border: 1px solid #dadada;
}

.sidenav a,
.dropdown-btn {
  padding: 15px 8px 15px 16px;
  text-decoration: none;
  font-size: 16px;
  color: black;
  display: block;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  font-weight: 545;
}

.dropdown-btn {
  border-bottom: 1px solid black;
}

.sidenav a:hover,
.dropdown-btn:hover {
  color: #5d5d5d;
}

.active {
  // background-color: green;
  color: black;
  border-left: 5px solid green;
}

.dropdown-container .active {
  color: white;
  background-color: gray;
}

.dropdown-container {
  display: none;
  background-color: white;
  padding-left: 8px;
}

.fa-caret-down {
  float: right;
  padding-right: 8px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

<div class="col-md-3 col-lg-3 col-sm-3 divmargin">
  <div class="sidenav ml-3">
    <button class="dropdown-btn">User1							
						</button>
    <div class="dropdown-container">
      <a href="#" class="item active">personal</a>
      <a href="#" class="item">Address</a>
      <a href="#" class="item">Edicutation</a>
      <a href="#" class="item">Exerience</a>
    </div>
    <button class="dropdown-btn">User2							
						</button>
    <div class="dropdown-container">
      <a href="#" class="item active">personal</a>
      <a href="#" class="item">Address</a>
      <a href="#" class="item">Edicutation</a>
      <a href="#" class="item">Exerience</a>
    </div>
    <button class="dropdown-btn">User3							
						</button>
    <div class="dropdown-container">
      <a href="#" class="item active">personal</a>
      <a href="#" class="item">Address</a>
      <a href="#" class="item">Edicutation</a>
      <a href="#" class="item">Exerience</a>
    </div>
    <button class="dropdown-btn">User4						
						</button>
    <div class="dropdown-container">
      <a href="#" class="item active">personal</a>
      <a href="#" class="item">Address</a>
      <a href="#" class="item">Edicutation</a>
      <a href="#" class="item">Exerience</a>
    </div>
  </div>
</div>
<div class="col-md-9 col-lg-9 col-sm-9">
  <button type="button" class="btn btn-secondary" on-click="activeclass('prev')">Previous</button>
  <button type="button" class="btn btn-secondary" on-click="activeclass('next')">Next</button>
</div>