<div class="container">
  <span class="btn btn-toggle">
    Clique
  </span>
  <div class="thumb item-toggle test1" id="test1">

  </div>
</div>
<div class="container">
  <span class="btn btn-toggle">
    Clique
  </span>
  <div class="thumb item-toggle test2" id="teste2">

  </div>
</div>


*{
  margin: 0;
  padding: 0;
}
.container{
  padding: 50px;
}
.thumb{
  background-color: blue;
  width: 100px;
  height: 100px;
  display: block;
}
.btn{
  padding: 5px 15px;
  color: #fff;
  background-color: green;
  cursor: pointer;
  margin-bottom: 10px;
  display: inline-block;
}

.item-toggle {
  max-height:0; overflow:hidden; transition: 500ms;
}
.active-toggle {
  max-height:100vh; overflow:inerght; transition: 500ms;
}


Array.from(document.querySelectorAll(".btn-toggle")).forEach(function(el){
  el.onclick= function(e) {

    console.log(el.nextElementSibling);
    slideToggle(el.nextElementSibling);

  }
});

/*
let toggleItem = document.querySelectorAll(".item-toggle");

for(i = 0; i < toggleItem.length; i++){
  //toggleItem[i].style.visibility='hidden';
  toggleItem[i].setAttribute("style", "max-height:0; overflow:hidden");

}
*/


function slideToggle(el, className){
  console.log(el);
  el.classList.toggle('active-toggle');
}