Как реализовать второй уровень вложенности в табах

const closeBtn = document.querySelectorAll('[data-close]');

  closeBtn.forEach((btn, i) => {
    btn.addEventListener('click', () => {
      closeTabs(i);
    });
  });

  const mainBtns = document.querySelectorAll('.main-navigation__l1-tab');
  const mainTabs = document.querySelectorAll('.tab__content');
  const tabWrapper = document.querySelector('.tabs__wrapper');

  function hideTabs(i) {
    mainTabs.forEach((tab) => {
      tab.classList.remove('show');
    });

    mainBtns.forEach((btn) => {
      btn.classList.remove('active');
    });

    mainTabs[i].classList.add('show');
    mainBtns[i].classList.add('active');
    tabWrapper.classList.add('top');
  }

  function closeTabs(i) {
    mainBtns[i].classList.remove('active');
    mainTabs[i].classList.remove('show');
    tabWrapper.classList.remove('top');
  }

  mainBtns.forEach((btn, i) => {
    btn.addEventListener('click', (e) => {
      if (mainBtns[i].classList.contains('active')) {
        closeTabs(i);
      } else {
        hideTabs(i);
      }
    });
  });
});

@import url(/css/nullstyle.css);
.header {
  position: relative;
  background-color: white;
}

.container {
  max-width: 1155px;
  margin: 0 auto;
  font-family: "Noto Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.header__column {
  background-color: white;
  position: fixed;
  z-index: 1000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
}

.logo {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 250px;
          flex: 0 0 250px;
}
.logo img {
  width: 100%;
}

.header__column-item {
  width: 860px;
  height: 110px;
  padding: 15px 0px 0px 0px;
}

.main-navigation__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 110px;
}

.main-navigation__l1-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
}

.main-navigation__l1-item {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

.main-navigation__l1-tab {
  position: relative;
  height: 100%;
  padding: 50px 20px 13px 20px;
}
.main-navigation__l1-tab:hover:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 6px;
  background-color: rgb(0, 60, 125);
  bottom: 0;
  left: 0;
}
.main-navigation__l1-tab:active {
  background-color: rgb(127, 127, 127);
  color: #fff;
}

.search__bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 110px;
}

.search__form {
  padding: 5px 0px 0px 0px;
}

.search__input {
  border: 2px solid rgb(0, 60, 125);
  width: 282px;
  padding: 5px 10px;
}

.contacts {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0px 0px 25px 0px;
}
.contacts div:first-child {
  margin: auto;
}
.contacts div {
  margin: 0px 0px 0px 25px;
}

.phone__column,
.email__column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 15px;
  color: rgb(0, 60, 125);
}

.fa-magnifying-glass {
  font-size: 20px;
  margin: 0px 10px 0px 0px;
}

.fa-envelope,
.fa-phone-volume {
  margin: 0px 10px 0px 0px;
  font-size: 18px;
}

.active {
  background-color: rgb(127, 127, 127);
  color: white;
}
.active:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 6px;
  background-color: rgb(0, 60, 125);
  bottom: 0;
  left: 0;
}

.center {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.tabs__wrapper {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transition: all linear 0.3s;
  -o-transition: all linear 0.3s;
  transition: all linear 0.3s;
  top: -1000px;
}

.tabs {
  height: 440px;
  background-color: rgb(127, 127, 127);
}
.tabs .container {
  height: 440px;
}

.tab__content {
  background-color: rgb(127, 127, 127);
  color: white;
  font-size: 13px;
  font-weight: 400;
}

.tab__subtitle {
  color: rgb(0, 60, 125);
  text-decoration: underline;
  font-weight: 700;
  padding: 20px 20px 12px 40px;
  border-bottom: solid 2px white;
}
.tab__subtitle .center {
  line-height: 17px;
}

.tab__column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.tab__column-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  max-height: 370px;
  margin: 0px 0px 0px 7px;
}

.tab__item {
  margin: 0px 2px;
  padding: 17px 2px 17px 16px;
  border-bottom: solid 2px white;
  width: 357px;
  position: relative;
  background-color: rgb(127, 127, 127);
}
.tab__item a {
  color: white;
}
.tab__item:hover {
  background-color: rgb(166, 166, 166);
  cursor: pointer;
}
.tab__item:hover::before {
  position: absolute;
  display: block;
  content: "";
  height: 100%;
  width: 7px;
  background-color: rgb(0, 60, 125);
  top: 0;
  left: 0;
}

.main-navigation__close {
  text-align: center;
  position: absolute;
  left: 557px;
  bottom: 0;
}

.fa-chevron-up {
  cursor: pointer;
  font-size: 20px;
}

.main {
  color: #fff;
}
.main .container {
  position: relative;
}

.main__body {
  position: absolute;
  top: 0;
  padding: 60px 0px 0px 100px;
}

.main__title {
  font-size: 40px;
}

.main__subtitle {
  margin: 15px 0px 0px 0px;
  font-size: 20px;
  font-weight: 400;
}
.main__subtitle p {
  width: 440px;
}

.slider__carousel {
  /* height: 87vh; */
  height: 500px;
  overflow: hidden;
}

.slider__item img {
  width: 100%;
  height: 500px;
}

.move {
  -webkit-transition: 0.7s all;
  -o-transition: 0.7s all;
  transition: 0.7s all;
}

.statistics {
  color: rgb(0, 60, 125);
}

.statistics__column {
  padding: 20px 0px 0px 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 55px;
  max-width: 1060px;
  margin: 0 auto;
  text-align: center;
}

.time {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 200px;
          flex: 0 0 200px;
}
.time img {
  width: 100%;
}

.researches__subtitle,
.experience__subtitle,
.customers__subtitle {
  margin: 25px 0px 0px 0px;
  font-size: 15px;
}

.body__navigation-content {
  margin: 15px 0px 0px 0px;
  position: relative;
  background-color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.body__navigation-column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.body__column-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: distribute;
      align-content: space-around;
  max-height: 370px;
}

.body__item {
  margin: 0px 2px;
  padding: 15px 2px 15px 15px;
  border-bottom: solid 2px white;
  width: 357px;
  position: relative;
  background-color: rgb(0, 60, 125);
  border-radius: 8px;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.body__item a {
  color: #fff;
  font-weight: 700;
  margin-left: 8px;
}
.body__item:hover {
  background-color: #fff;
  cursor: pointer;
}
.body__item:hover a {
  color: rgb(0, 60, 125);
}

.body__item_icon {
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
}  

.hide {
  display: none;
}

.show {
  display: block;
}

.top {
  top: 0 !important;
}

<body>
    <header class="header">
      <div class="container">
        <div class="header__column">
          <div class="logo">
            <img src="/img/icon/aipr-logo-frvr.svg" alt="logo" />
          </div>
          <div class="main-navigation__wrapper">
            <ul class="main-navigation__l1-list">
              <li class="main-navigation__l1-item">
                <button class="main-navigation__l1-tab">
                  <span data-content="1" class="main-navigation__l1-tab-inner"
                    >Каталог<br />исследований</span
                  >
                </button>
              </li>
              <li class="main-navigation__l1-item">
                <button class="main-navigation__l1-tab">
                  <span class="main-navigation__l1-tab-inner">О компании</span>
                </button>
              </li>
              <li class="main-navigation__l1-item">
                <button class="main-navigation__l1-tab">
                  <span class="main-navigation__l1-tab-inner">Услуги</span>
                </button>
              </li>
              <li class="main-navigation__l1-item">
                <button class="main-navigation__l1-tab">
                  <span class="main-navigation__l1-tab-inner">Кейсы</span>
                </button>
              </li>
              <li class="main-navigation__l1-item">
                <button class="main-navigation__l1-tab">
                  <span class="main-navigation__l1-tab-inner">Контакты</span>
                </button>
              </li>
            </ul>
          </div>

          <div class="search__bar">
            <form action="" class="search__form">
              <i class="fa-solid fa-magnifying-glass"></i>
              <input
                class="search__input"
                type="search"
                placeholder="Поиск по исследованиям"
              />
            </form>

            <div class="contacts">
              <div class="phone__column">
                <i class="fa-sharp fa-solid fa-phone-volume"></i>
                <span href="" class="contacts__phone">+7 (812) 603-75-92</span>
              </div>
              <div class="email__column">
                <i class="fa-sharp fa-regular fa-envelope"></i>
                <span href="" class="contacts__email">[email protected]</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class="main">
      <div class="container">
        <div class="tabs__wrapper">
          <div class="tabs">
            <div class="container">
              <div class="tab__content hide">
                <div class="tab__subtitle">
                  <span class="center"
                    >Каталог<br />
                    исследований</span
                  >
                </div>
                <div class="tab__column">
                  <ul class="tab__column-item">
                    <li class="tab__item sub__nav-bts">
                      <button>
                        Нефтегазовая промышленность <span>(454)</span>
                      </button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>
                        Информационные технологии, оборудование
                        <span>(161)</span>
                      </button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>
                        Машиностроение, промышленное оборудование
                        <span>(590)</span>
                      </button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>
                        Металлургия, металлы, металлоизделия <span>(811)</span>
                      </button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>
                        Электротехника, электроника <span>(140)</span>
                      </button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>
                        Добывающая промышленность, сырье <span>(274)</span>
                      </button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>
                        Строительство, недвижимость <span>(1009)</span>
                      </button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>Потребительские товары <span>(922)</span></button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>Легкая промышленность <span>(580)</span></button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>Медицина, фармакология <span>(332)</span></button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>Услуги для бизнеса <span>(191)</span></button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>Перевозки, логистика <span>(91)</span></button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>
                        Химическая промышленность <span>(1601)</span>
                      </button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>Потребительские услуги <span>(345)</span></button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>Продукты питания <span>(1335)</span></button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>Сельское хозяйство <span>(607)</span></button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>Тара и упаковка <span>(111)</span></button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>Деревообработка <span>(371)</span></button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>Электроэнергетика<span>(113)</span></button>
                    </li>
                    <li class="tab__item sub__nav-bts">
                      <button>Транспорт <span>(375)</span></button>
                    </li>
                  </ul>
                </div>
                <button class="main-navigation__close">
                  <i data-close="" class="fa-sharp fa-solid fa-chevron-up"></i>
                </button>
              </div>

              <div class="tab__content hide">
                <div class="tab__subtitle">
                  <span class="center">О компании</span>
                </div>
                <div class="tab__column">
                  <ul class="tab__column-item">
                    <li class="tab__item">
                      <a href="">Наша команда</a>
                    </li>
                    <li class="tab__item">
                      <a href="">Отзывы </a>
                    </li>
                    <li class="tab__item">
                      <a href="">Клиенты </a>
                    </li>
                  </ul>
                </div>
                <button class="main-navigation__close">
                  <i data-close="" class="fa-sharp fa-solid fa-chevron-up"></i>
                </button>
              </div>
              <div class="tab__content hide">
                <div class="tab__subtitle">
                  <span class="center">Услуги</span>
                </div>
                <div class="tab__column">
                  <ul class="tab__column-item">
                    <li class="tab__item">
                      <a href="">Маркетинговые исследования</a>
                    </li>
                    <li class="tab__item">
                      <a href="">Исследование мировых рынков</a>
                    </li>
                    <li class="tab__item">
                      <a href="">Поиск свободных ниш</a>
                    </li>
                    <li class="tab__item">
                      <a href="">Экспертные интервью</a>
                    </li>
                    <li class="tab__item">
                      <a href="">Стратегия развития</a>
                    </li>
                    <li class="tab__item">
                      <a href="">Бизнес-план</a>
                    </li>
                    <li class="tab__item">
                      <a href="">Методология</a>
                    </li>
                    <li class="tab__item">
                      <a href="">Источники</a>
                    </li>
                  </ul>
                </div>
                <button class="main-navigation__close">
                  <i data-close="" class="fa-sharp fa-solid fa-chevron-up"></i>
                </button>
              </div>

              <div class="tab__content hide">
                <div class="tab__subtitle">
                  <span class="center">Кейсы</span>
                </div>
                <div class="tab__column">
                  <ul class="tab__column-item">
                    <li class="tab__item">
                      <a href=""
                        >Определение доли импорта в потреблении продукта в РФ</a
                      >
                    </li>
                    <li class="tab__item">
                      <a href=""
                        >Анализ проектов в отрасли для разработки стратегии
                        развития нефтяной компании</a
                      >
                    </li>
                    <li class="tab__item">
                      <a href="">Выявление компаний лидеров на рынке</a>
                    </li>
                    <li class="tab__item">
                      <a href=""
                        >Оценка целесообразности переноса производственных
                        мощностей</a
                      >
                    </li>
                    <li class="tab__item">
                      <a href=""
                        >Анализ потребительских предпочтений на рынке
                        малоэтажного строительства</a
                      >
                    </li>
                    <li class="tab__item">
                      <a href="">Оценка перспективных рыночных ниш</a>
                    </li>
                  </ul>
                </div>
                <button class="main-navigation__close">
                  <i data-close="" class="fa-sharp fa-solid fa-chevron-up"></i>
                </button>
              </div>

              <div class="tab__content contacts__content hide">
                <div class="tab__subtitle">
                  <span class="center">Контакты</span>
                </div>
                <div class="tab__column">
                  <ul class="tab__column-item"></ul>
                </div>
                <button class="main-navigation__close">
                  <i data-close="" class="fa-sharp fa-solid fa-chevron-up"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="l2__wrapper">
          <div class="tab__content-l2-wrapper hide">
            <div class="tab__content l2">
              <div class="tab__subtitle l2">
                <span class="center">Нефтегазовая промышленность</span>
              </div>
              <div class="tab__column-l2-wrapper">
                <div class="tab__column tab__column-l2">
                  <ul class="tab__column-item l2">
                    <li class="tab__item l2">
                      <a href="">Альтернативное топливо</a>
                    </li>
                    <li class="tab__item l2">
                      <a href="">Газ</a>
                    </li>
                    <li class="tab__item l2">
                      <a href="">Добыча нефти и газа</a>
                    </li>
                    <li class="tab__item l2">
                      <a href="">Масла и смазочные материалы</a>
                    </li>
                    <li class="tab__item l2">
                      <a href="">Нефтепродукты и нефтехимия</a>
                    </li>
                    <li class="tab__item l2">
                      <a href="">Нефтесервисные услуги</a>
                    </li>
                    <li class="tab__item l2">
                      <a href="">Топливо, АЗС, нефтебазы</a>
                    </li>
                  </ul>
                </div>
                <button class="main-navigation__close">
                  <i data-close="" class="fa-sharp fa-solid fa-chevron-up"></i>
                </button>
              </div>
            </div>
          </div>
          <div class="tab__content-l2-wrapper hide">
            <div class="tab__content l2">
              <div class="tab__subtitle l2">
                <span class="center"
                  >Информационные технологии, оборудование</span
                >
              </div>
              <div class="tab__column-l2-wrapper">
                <div class="tab__column tab__column-l2">
                  <ul class="tab__column-item l2">
                    <li class="tab__item l2">
                      <a href="">IT услуги</a>
                    </li>
                    <li class="tab__item l2">
                      <a href="">Безопасность</a>
                    </li>
                    <li class="tab__item l2">
                      <a href="">Кабели и антенны</a>
                    </li>
                    <li class="tab__item l2">
                      <a href="">Компьютеры и комплектующие</a>
                    </li>
                    <li class="tab__item l2">
                      <a href="">Телевидение</a>
                    </li>
                    <li class="tab__item l2">
                      <a href="">Телефония</a>
                    </li>
                  </ul>
                </div>
                <button class="main-navigation__close">
                  <i data-close="" class="fa-sharp fa-solid fa-chevron-up"></i>
                </button>
              </div>
            </div>
          </div>