nested accordion collapsing doesn't work properly

Question

I have this accordion menu. link to jsfiddle When I click on one of these items siblings disappear. In the last accordion item I have nested accordion item. The problem appears if I expand button called SmartApp, after that I expand inner accordion item and than collapse parent accordion outer elements won't reappear because inner accordion buttons still have active-acc class. I tried to remove active-acc class from all buttons but I couldn't manage it. Any kind of help is appreciated. Thanks in advance.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active-acc");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}


$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    $("#top-nav").css('display', 'none');
  } else {
    $("#top-nav").css('display', 'flex');
  }
});
$('.acc-buttons').on('click', function() {
  $(this).siblings().removeClass('hide-accordion-item')
  if ($(this).find('button').hasClass('active-acc')) {
    $(this).siblings().addClass('hide-accordion-item');
  }
})
// if ($('.inner-panel').siblings().hasClass('active-acc')) {
//   $(this).css('overflow', 'scroll')
// }

$('#btn-smartapp').on('click', function() {
  if ($(this).hasClass('active-acc')) {
    $('.inner-buttons').removeClass('active-acc')
  }
});
$('.nav-link, .language-menu-hider').on('click', function() {
  if (!$(this).is('#navbarDropdownMenuLink')) {
    $('.overlay').css('visibility', 'hidden')
    $('.navbar-collapse').collapse('hide');
  }
});

#parent-acc-item {
  overflow-y: scroll;
}

::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px darkslategray;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #080808;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(64, 64, 64, 0.3);
}

#accordion-container {
  position: absolute;
  top: 30%;
}

.acc-buttons {
  margin: 0 auto;
}

.accordion {
  background-color: transparent;
  color: #ccc;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  border-radius: 10px;
  text-align: left;
  outline: none;
  font-size: 1.3rem;
  transition: 0.4s;
}

.active-acc,
.accordion:hover {
  background-color: #ccc;
  color: darkslategray;
}

.accordion:after {
  content: '\002B';
  float: right;
  margin-left: 5px;
}

.active-acc:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.panel p {
  margin-top: 5px;
  color: #ccc;
  font-size: 0.9rem;
}

.panel ul {
  color: #ccc;
}

.hide-accordion-item {
  display: none;
}

.services-info {
  margin-bottom: 0;
}

.services-info li {
  color: #ccc;
  font-size: 0.9rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" id="accordion-container">
  <div class="row">

    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 acc-buttons">
      <button class="accordion">მარშრუტის კონტროლი და დაგეგმვა</button>
      <div class="panel">
        <p>პლატფორმა იძლევა შესაძლებლობას წინასწარ დაიგეგმოს მოძრაობის მარშრუტი, მაქსიმალური ეფექტურობის მისაღწევად (სასწრაფო შეკვეთების შესრულება, ახლოს მდებარე უბნების ერთ მარშრუტში მოქცევა, განმეორებითი ვიზიტების კონტროლი). სისტემა იძლევა ინფორმაციას
          კონკრეტულ მომენტში საიდან, სად და რა სიჩქარით მიემართება თანამშრომელი. სისტემა აცნობებს მენეჯმენტს მნიშვნელოვანი მარშრუტიდან გადახრას დროის და ადგილის მითითებით. ამავდროულად იძლევა ზუსტ ტრაექტორიას რუკაზე, მანძილს, დროს გზაში და პარკინგებზე,
          გადაადგილების სიჩქარეს და მძღოლის აგრესიულობის დონეს. სისტემა იძლევა შესაძლებლობას გაკონტროლდეს თუ რა დრო გაატარა თანამშრომელმა თითოეულ ვიზიტზე.</p>
      </div>
    </div>
    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 acc-buttons">
      <button class="accordion">შეტყობინებები</button>
      <div class="panel">
        <p>შეტყობინებები მნიშვნელოვანი მოვლენების შესახებ. მაგალითად ინფორმაცია ადგილდებარეობის შესახებ (გეოზონაში შესვლა-გამოსვლა), SOS შეტყობინება, ავტო-საგზაო შემთხვევა და ა.შ</p>
      </div>
    </div>
    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 acc-buttons">
      <button class="accordion">საწვავის ხარჯი და კომპენსაციები პირადი ავტომობილებით სარგებლობისათვის</button>
      <div class="panel">
        <p>სატრანსპორტო საშუალების ავზებში დამონტაჟებული დამატებითი სენსორი იძლევა შესაძლებლობას გაკონტროლდეს საწვავის არსებული დონე, ხარჯი, გადახრა დაგეგმილიდან, მითითებული პერიოდის მიხედვით და პერიოდის ზუსტი გარბენი სამუშაო გრაფიკის გათვალისწინებით.</p>
      </div>
    </div>
    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 acc-buttons">
      <button class="accordion">ერთჯერადი “დავალებების“ მოდული</button>
      <div class="panel">
        <p>პლატფორმა შესაძლებლობას აძლევს მომხმარებლებს შექმნან ერთჯერადი „დავალებები“ და ავტომატურად გაუნაწილონ პერსონალს ოპტიმიზაციის ალგორითმის მიხედვით : მარშრუტი, დრო, მოქმედება, თანამშრომელი</p>
      </div>
    </div>
    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 acc-buttons">
      <button class="accordion">ანალიტიკა და რეპორტინგი</button>
      <div class="panel">
        <p>ეს მოდული იძლევა სრულ ანალიტიკას, რომელიც საჭიროა სტრატეგიული დაგეგმარებისთვის, თანამშრომელთა მოტივირების და ანაზრაურების სისტემის ჩამოყალიბებისთვის, რეპორტინგი მოიცავს შემდეგ კრიტიკულ საკითხებს:</p>
        <ul class="services-info">
          <li>შესრულებული სამუშაოსა და გახარჯული რესურსების რეპორტი</li>
          <li>ისტორია შესრულებული სამუშაოების შესახებ , რომელშიც ფიქსირდება ყველა ეტაპი და ცვლილებები, თანამშრომლების კომენტარები.</li>
          <li>გაზიარების ფუნქცია სხვა და სხვა განყოფილებების მენეჯერებისთვის</li>
        </ul>
        <p>ანალიტიკის მოდულის მეშვებით მიიღებთ მომენტალურ წვდომას მონაცემების ისტორიაზე და გექნებათ შესაძლებლობა შეაფასოთ თითოეული მარშრუტის სიგრძე, ხანგრძლივობა და საწვავის ხარჯი.</p>
        <ul class="services-info">
          <li>ეფექტურობის დონის ასამაღლებად მიიღეთ სრული რეპორტინგი საწვავის, საბურავების და საპოხი მასალების ხარჯების შესახებ დეპარტამენტებისა და თანამშრომელების მიხედვით.</li>
          <li>ინტერაქტიული რეპორტების მიღება შესაძლებელია რამდენიმე წამში PDF, Excel ფორმატებში.</li>
          <li>შეამცირეთ ავტოსაგზაო შემთხვევების რაოდენობა, თანამშრომელების ტარების მანერის, აგრესიულობის დონის კონტროლის მეშვეობით.</li>
          <li>მიიღეთ შეტყობინებები ავტოპარკის გეგმიური ტექნიკური მომსახურების შესახებ.</li>
        </ul>
      </div>
    </div>
    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 acc-buttons">
      <button class="accordion">მობილური აპლიკაცია</button>
      <div class="panel">
        <p>მობილური აპლიკაციის მეშვეობით გექნებათ შესაძლებლობა მიიღოთ ინფორმაცია და შეაფასოთ სავაჭრო ობიექტები გადახდისუნარიანობის მიხედვით და გადახდების ისტორიიდან გამომდინარე შეუცვალოთ საკრედიტო რეიტინგი თითოეულ სავაჭრო ობიექტს. პლატფორმას აქვს ორი ძირითადი
          ფუნქცია: წარმოადგენს დებიტორული მოთხოვნების მიღების ინსტრუმენტს და აფრთხილებს მომხმარებლებს რისკებზე. სპეციალურად შექმნილი ანალიტიკური პროგრამული უზრუნველყოფა შეაფასებს სავაჭრო ობიექტებს 10 ქულიანი სისტემით, სადაც (10 ქულა ურისკოა, ხოლო 0 მაქსიმალურად
          რისკიანი). აპლიკაციის ალგორითმი რეიტინგად გარდაქმნის დისტიბუტორის მიერ მინიჭებულ სტატუსებს. მონაცემთა ბაზა ყოველდღიურად განახლებადია, რაც მნიშვნელოვნად ამცირებს სავაჭრო ობიექტებისგან ვალის მიუღებლობის რისკს</p>
      </div>
    </div>
    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 acc-buttons">
      <button id="btn-smartapp" class="accordion">SmartApp</button>
      <div class="panel" id="parent-acc-item">
        <p>კომპანია სმარტ ჯიპიესი სადისტრიბუციო კომპანიებს სთავაზობს ინოვაციურ და ეფექტურ აპლიკაციას Smart APP-ს, რომელიც კომპანიის მენეჯმენტს საშუალებას აძლევს მიიღოს თანამშრომლების მიერ შესრულებული სამუშაოს სრული სურათი აპლიკაციის გადმოტვირთვა მოხდება
          სავაჭრო წარმომადგენლების ე.წ „პოკეტებში“, რომლის საშუალებითაც კომპანიის მენეჯმენტი მიიღებს დეტალურ რეპორტს წინასწარ შედგენილი მარშრუტების მიხედვით:</p>
        <ul>
          <li>ვიზიტირებულ ობიექტებზე</li>
          <li>არავიზიტირებულ (გამოტოვებულ) ობიექტებზე</li>
          <li>არაგეგმიურ ვიზიტებზე</li>
        </ul>
        <div class="col-xl-8 col-lg-8 col-sm-12">
          <button class="accordion">როგორ მუშაობს SmartApp?</button>
          <div class="panel inner-panel">
            <p>თითოეულ კომპანიას აქვს წვდომა ინდივიდუალურ მონაცემთა ბაზაზე, სადაც შეტანილია ინფორმაცია თითოეულ სავაჭრო ობიექტზე (ობიექტის დასახელება, საიდენტიფიკაციო კოდი, ზუსტი მისამართი რუკაზე)</p>
            <ul>
              <li>პლატფორმა აფიქსირებს ვიზიტს დროს, ადგილს და მკაცრად მითითებული თანამიმდევრობას მარშრუტიდან გადახვევის ან თანამიმდევრობის დაუცველობის შემთხვევაში აღრიცხავს დარღვევებს და ასახავს საბოლოო რეპორტში.</li>
              <li>სისტემაში შესაძლებელია ნებისმიერ დროს მოხდეს, როგორც სავაჭრო წარმომადგენლის (დისტრიბუტორის) ასევე სავაჭრო ობიექტის წაშლა და დამატება</li>
            </ul>
          </div>
        </div>
        <div class="col-xl-8 col-lg-8 col-sm-12">
          <button class="accordion">Smart APP-რეპორტი</button>
          <div class="panel inner-panel">
            <p>წინასწარ შეყვანილი მარშრუტების საფუძველზე სერვერი დაამუშავებს დაგროვებულ ინფორმაციას და დააგენერირებს რეპორტს, რომელსაც დააგზავნის თქვენს მიერ მითითებულ ადრესატებთან.</p>
            <ul>
              <li>ვიზიტირებული</li>
              <li>არავიზიტირებული (გამოტოვებული)</li>
              <li>არაგეგმიური ვიზიტი</li>
              <li>სტენდის ფოტო რეპორტი</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Follow the link for nested accordion collapsing 

https://codepen.io/glebkema/pen/QQOZRe