Accordion animation does not work for child elements

Question

I'm struggling with animated accordion for my site. Second level of my accordion does not have animation and is not visible.

It happens only on the second level of my accordion.

This animation is from W3school https://www.w3schools.com/howto/howto_js_accordion.asp

Here is my code:

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

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

/* Logo - Homepage */
.logo {
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100%;
}
/* Post Menu - Homepage */
.container-1 {
  display: block;
  margin: 30px auto;
  width: 78%;
  border: 0px solid #00000052;
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.198);
}
.accordion {
  display: block;
  margin-left:auto;
  margin-right: auto;
  background-color: #052650;
  color: #CDD8E2;
  font-size: 25px;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: 1px solid #00000052;
  border-radius: 20px;
  outline: none;
  transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .hover:hover {
  background-color: #063064;
}
.accordion-sub {
  display: block;
  margin-left:auto;
  margin-right: auto;
  background-color: #083A79;
  color: #CDD8E2;
  font-size: 25px;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: 1px solid #00000052;
  border-radius: 20px;
  outline: none;
  transition: 0.4s;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion-sub:hover {
  background-color: #0A4DA1;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
  display: none;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  max-height: 0;
}
.box {
  padding: 18px 18px;
  background-color: #04233C;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.thumbnail {
  flex: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 20px;
  margin: 10px 10px;
  transition: 0.5s;
}
.thumbnail h3 {color: #F69578;}
.thumbnail img {
  width: 300px;
}
.thumbnail:hover {
  transform: scaleX(1.06) scaleY(1.06);
}

<div class="container-1">
    <button class="accordion hover click">Podróżowanie</button>
    <div class="accordion panel">
      <button class="accordion-sub click" id="slide-down">Nad wodę</button>
        <div class="panel box">
          <div class="grid">
            <div class="thumbnail">
              <a href="index.html">
              <img src="/Posts/Dziura w lodzie/thumb.jpg">
              <h3>Dziura w lodzie</h3>
              <p>Nigdy wcześniej nie wykułam tak równej dziury, niesamowite przeżycie. Polecam każdemu książkę "równe kucie mamucie!"</p>
              </a>
            </div>
            <div class="thumbnail">
              <img src="/Posts/Dziura w lodzie/thumb.jpg">
              <h3>Dziura w lodzie</h3>
              <p>Nigdy wcześniej nie wykułam tak równej dziury, niesamowite przeżycie. Polecam każdemu książkę "równe kucie mamucie!"</p>
            </div>
            <div class="thumbnail">
              <img src="/Posts/Dziura w lodzie/thumb.jpg">
              <h3>Dziura w lodzie</h3>
              <p>Nigdy wcześniej nie wykułam tak równej dziury, niesamowite przeżycie. Polecam każdemu książkę "równe kucie mamucie!"</p>
            </div>
            <div class="thumbnail">
              <img src="/Posts/Dziura w lodzie/thumb.jpg">
              <h3>Dziura w lodzie</h3>
              <p>Nigdy wcześniej nie wykułam tak równej dziury, niesamowite przeżycie. Polecam każdemu książkę "równe kucie mamucie!"</p>
            </div>
          </div>
        </div>
      <button class="accordion-sub click">W góry</button>
        <div class="panel box">
          <p>UGABUGABUAAGGAGAGAGGAGAG</p>
        </div>
    </div>
</div>

Many thanks for any help.