Показать скрыть элемент

[info50]

Добрый день.

В интернете нашел пример скрипта, который показывает и скрывает элементы независимо друг от друга.

<style type="text/css">
.collapsible {
background-color: #777;
color: white;
cursor: pointer:
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,             
.collapsible: hover {
background-color: #555;
}            
.content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
</style>

<div class="conteiner">
    <div>
        <div>
            <button class="collapsible">Open Collapsible</button>
        </div>
    </div>
    <div class="content">
        <p>text</p>
    </div>
    <div>
        <div>
            <button class="collapsible">Open Collapsible</button>
        </div>
    </div>
    <div class="content">
        <p>text</p>
    </div>
    <p>My texst</p>
    <div>
        <div>
            <button class="collapsible">Open Collapsible</button>
        </div>
    </div>
    <div class="content">
        <p>text</p>
    </div>
</div> 

<script>
let coll = document.getElementsByClassName('collapsible');
for (let i = 0; i < coll.length; i++) {
    coll[i].addEventListener('click', function () {
        this.classList.toggle('active');
        let content = this.parentNode.parentNode.nextElementSibling;
        if (content.style.maxHeight) {
            content.style.maxHeight = null;
        } else {
            content.style.maxHeight = content.scrollHeight + 'px'
        }
    })
}
 </script>

Скрипт работает. Но если я оборачиваю кнопку в дополнительные div-ы, то скрипт уже не работает.

<div class="conteiner">	
 <div>
  <div>
   <div>
    <div> Всего 4 </div>
   </div>
   <div>
    <div><span class="collapsible"> Показать/ скрыть</span></div>	<!-- Нажимаемая кнопка -->
   </div>
   <div>
    <div>
     <div><button color="white">Обзор</button>
      <div><button color="white">Подробнее</button></div>
     </div>
     <div>Текст</div>
    </div>
   </div>
  </div>
 </div>
	
 <div  class="content"> <!-- Показываемый блок -->
  <div>
   <div>
    <div>Текст</div>
   </div>
   <div>
    <div>
     <div>Текст<div>Текст</div></div>
    </div>
   </div>
  </div>
 </div>
</div>

Подскажите пожалуйста, как можно исправить. И как можно сделать автоматическую смену надписей "Показать" и "скрыть".

Заранее всем спасибо!